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Introducción 


HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya antigua tecnologia, sino 
un nuevo concepto para la construcción de sitios web y aplicaciones en una era que combina dispositivos móviles, 
computación en la nube ytrabajos en red. 

Todo comenzó mucho tiempo atras eon una simple versión de HTML propuesta para crear la estructura basica de paginas 
web, organizar su contenido y compartir información. El lenguaje y la web misma nacieron principalmente eon la intención de 
comunicar información por medio de texto. 

El limitado objetivo de HTML motivó a varias companlas a desarrollar nuevos lenguajes y programas para agregar 
caracteristicas a la web nunca antes implementadas. Estos desarrollos iniciales crecieron hasta convertirse en populares y 
poderosos accesorios. Simples juegos y bromas animadas pronto se transformaron en sofisticadas aplicaciones, ofreciendo 
nuevas experiencias que cambiaron el concepto de la web para siempre. 

De las opciones propuestas, Java y Flash fueron las mas exitosas; ambas fueron masivamente adoptadas yampliamente 
consideradas como el futuro de Internet. Sin embargo, tan pronto como el numero de usuarios se inerementó e Internet paso 
de ser una forma de conectar amantes de los ordenadores a un campo estrategico para los negocios y la interacción social, 
limitaciones presentes en estas dos tecnologias probaron ser una sentencia de muerte. 

El mayor inconveniente de Java yFlash puede describirse como una falta de integración. Ambos fueron concebidos desde 
el principio como complementos (plug-ins), algo que se inserta dentro de una estructura pero que comparte eon la misma 
solo espacio en la pantalla. No existia comunicación e integración alguna entre aplicaciones ydocumentos. 

La falta de integración resultó ser critica y preparó el camino para la evolución de un lenguaje que comparte espacio en el 
documento eon HTML y no esta afectado por las limitaciones de los plug-ins. Javascript, un lenguaje interpretado incluido en 
navegadores, claramente era la manera de mejorar la experiencia de los usuarios y proveer funcionalidad para la web. Sin 
embargo, despues de algunos anos de intentos fallidos para promoverlo yalgunos malos usos, el mercado nunca lo adoptó 
plenamente y pronto su popularidad declinó. Los detractores tenian buenas razones para oponerse a su adopción. En ese 
momento, Javascript no era capaz de reemplazar la funcionalidad de Flash o Java. Apesar de ser evidente que ambos 
limitaban el alcance de las aplicaciones yaislaban el contenido web, populares funciones como la reproducción de video se 
estaban convirtiendo en una parte esencial de la web ysolo eran efectivamente ofrecidas a traves de estas tecnologias. 

Apesar del suceso inicial, el uso de Java comenzó a declinar. La naturaleza compleja del lenguaje, su evolución lenta y la 
falta de integración disminuyeron su importancia hasta el punto en el que hoydia no es mas usado en aplicaciones web de 
importancia. Sin Java, el mercado volcó su atención a Flash. Pero el hecho de que Flash comparte las mismas caracteristicas 
basicas que su competidor en la web lo hace tambien susceptible de correr el mismo destino. 

Mientras esta competencia silenciosa se llevaba a cabo, el software para acceder a la web continuaba evolucionando. 
Junto eon nuevas funciones ytecnicas rapidas de acceso a la red, los navegadores tambien mejoraron gradualmente sus 
interpretes Javascript. Mas potencia trajo mas oportunidades yeste lenguaje estaba listo para aprovecharlas. 

En cierto punto durante este proceso, se hizo evidente para algunos desarrolladores que ni Java o Flash podrian proveer 
las herramientas que ellos necesitaban para crear las aplicaciones demandadas por un numero creciente de usuarios. 
Estos desarrolladores, impulsados por las mejoras otorgadas por los navegadores, comenzaron a aplicar Javascript en sus 
aplicaciones de un modo nunca visto. La innovación y los increfbles resultados obtenidos llamaron la atención de mas 
programadores. Pronto lo que fue llamado la “Web 2.0” nació y la percepción de Javascript en la comunidad de 
programadores cambió radicalmente. 

Javascript era claramente el lenguaje que permitia a los desarrolladores innovar y hacer cosas que nadie habia podido 
hacer antes en la web. En los ultimos anos, programadores y diseńadores web alrededor del mundo surgieron eon los mas 
increibles trucos para superar las limitaciones de esta tecnologia y sus iniciales deficiencias en portabilidad. Gracias a estas 
nuevas implementaciones, Javascript, HTML y CSS se convirtieron pronto en la mas perfecta combinación para la necesaria 
evolución de la web. 

HTML5 es, de hecho, una mejora de esta combinación, el pegamento que une todo. HTML5 propone estandares para 
cada aspecto de la web y tambien un propósito claro para cada una de las tecnologias involucradas. Apartir de ahora, HTML 
provee los elementos estructurales, CSS se eneuentra concentrado en como volver esa estructura utilizable y atractiva a la 
vista, y Javascript tiene todo el poder necesario para proveer dinamismo y construir aplicaciones web completamente 
funcionales. 

Las barreras entre sitios webs y aplicaciones finalmente han desaparecido. Las tecnologias requeridas para el proceso 
de integración estan listas. El futuro de la web es prometedor y la evolución y combinación de estas tres tecnologias (HTML, 
CSS y Javascript) en una poderosa especificación esta volviendo a Internet la plataforma lider de desarrollo. HTML5 indica 
claramente el camino. 

IMPORTANTE: En este momento no todos los navegadores soportan HTML5 y la mayoria de sus funciones se 
eneuentran actualmente en estado de desarrollo. Recomendamos leer los capitulos y ejecutar los códigos eon las 
ultimas versiones de Google Chrome y Firefox. Google Chrome ya implementa muchas de las caracteristicas de HTML5 



y ademas es una buena plataforma para pruebas. Por otro lado, Firefox es uno de los mejores navegadores para 
desarrolladores ytambien provee total soporte para HTML5. 

Sea cual fuere el navegador elegido, siempre tenga en mente que un buen desarrollador instala y prueba sus códigos 
en cada programa disponible en el mercado. Ejecute los códigos provistos en este libro en cada uno de los 
navegadores disponibles. 

Para descargar las ultimas versiones, visite los siguientes enlaces: 

• www.google.com/chrome 

• www.apple.com/safah/download 

• www.mozilla.com 

• windows.microsoft.com 

• www.opera.com 

En la conclusión del libro exploramos diferentes alternativas para hacer sus sitios webs y aplicaciones accesibles desde 
viejos navegadores e incluso aguellos que aun no estan preparados para HTML5. 





Capitulo 1 
Documentos HTML5 


1.1 Componentes basicos 


HTML5 provee basicamente tres caracteristicas: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, 
incluso cuando algunas APls (Interface de Programación de Aplicaciones) y la especificación de CSS3 por completo no son 
parte del mismo, HTML5 es considerado el producto de la combinación de HTML, CSS y Javascript. Estas tecnologfas son 
altamente dependientes yactuan como una sola unidad organizada bajo la especificación de HTML5. HTML esta a cargo de 
la estructura, CSS presenta esa estructura y su contenido en la pantalla y Javascript hace el resto que (como veremos mas 
adelante) es extremadamente significativo. 

Mas alla de esta integración, la estructura slgue siendo parte esencial de un documento. La misma provee los elementos 
necesarios para ubicar contenido estatico o dinamico, yes tambien una plataforma basica para aplicaciones. Con la variedad 
de dispositivos para acceder a Internet y la diversidad de interfaces disponibles para interactuar con la web, un aspecto 
basico como la estructura se vuelve parte vital del documento. Ahora la estructura debe proveer forma, organización y 
flexibilidad, ydebe sertan fuerte como los fundamentos de un edificio. 

Para trabajar y crear sitios webs y aplicaciones con HTML5, necesitamos saber primero como esa estructura es 
construida. Crear fundamentos fuertes nos ayudara mas adelante a aplicar el resto de los componentes para aprovechar 
completamente estas nuevas tecnologias. 

Por lo tanto, empecemos por lo basico, paso a paso. En este primer capitulo aprendera como construir una plantilla para 
futuros proyectos usando los nuevos elementos HTML introducidos en HTML5. 

Hagalo usted mismo: Cree un archivo de texto vacio utilizando su editor de textos favorito para probar cada código 
presentado en este capitulo. Esto lo ayudara a recordar las nuevas etiquetas HTML y acostumbrarse a ellas. 

Conceptos basicos: Un documento HTML es un archivo de texto. Si usted no posee ningun programa para desarrollo 
web, puede simplemente utilizar el Bloc de Notas de Windows o cualquier otro editor de textos. El archivo debe ser 
grabado con la extensión .html yel nombre que desee (por ejemplo, micodigo.html). 

IMPORTANTE: Para acceder a información adicional y a los listados de ejemplo, visite nuestro sitio web 
www.minkbooks.com . 


1.2 Estructura global 


Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento esta diferenciada, declarada y 
determinada por etiquetas especfficas. En esta parte del capitulo vamos a ver como construir la estructura global de un 
documento HTML ylos nuevos elementos semanticos incorporados en HTML5. 


<!DOCTYPE> 


En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente 
sencillo: 


<!DOCTYPE html> 


Listado 1-1. Usando el elemento <doctype>. 

IMPORTANTE: Esta linea debe ser la primera linea del archivo, sin espacios o Ifneas que la precedan. De esta forma, el 
modo estandar del navegador es activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible, 
o ignoradas en caso contrario. 

Hagalo usted mismo: Puede comenzar a copiar el código en su archivo de texto y agregar los próximos a medida que 
los vamos estudiando. 


<html> 


Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo 
arbol de este lenguaje tiene su ralzen el elemento <html>. Este elemento envolvera al resto del código: 


<!DOCTYPE html> 

<html lang="es"> 
</html> 


Listado 1-2. Usando el elemento <html>. 

El atributo lang en la etiqueta de apertura <html> es el unico atributo que necesitamos especificar en HTML5. Este 
atributo define el idioma humano del contenido del documento que estamos creando, en este caso es porespańol. 

Conceptos basicos: HTML usa un lenguaje de etiquetas para construir paginas web. Estas etiquetas HTML son 
palabras clave y atributos rodeados de los signos mayor y menor (por ejemplo, <html lang="es">). En este caso, 
html es la palabra clave y lang es el atributo eon el valor es. La mayoria de las etiquetas HTML se utilizan en pares, una 
etiqueta de apertura y una de cierre, y el contenido se declara entre ellas. En nuestro ejemplo, <html lang="es"> 
indica el comienzo del código HTML y</html> indica el finał. Compare las etiquetas de apertura y cierre yvera que la 
de cierre se distingue por una barra invertida antes de la palabra clave (por ejemplo, </html>). El resto de nuestro 
código sera insertado entre estas dos etiquetas: <html> ... </html>. 

IMPORTANTE: HTML5 es extremadamente flexible en cuanto a la estructura ya los elementos utilizados para construirla. 
El elemento <html> puede ser incluido sin ningun atributo o incluso ignorado completamente. Con el propósito de 
preservar compatibilidad (yporalgunas razones extras que no vale la pena mencionar aqui) le recomendamos que siga 
algunas reglas basicas. En este libro vamos a enseńarle como construir documentos HTML de aeuerdo a lo que 
nosotros consideramos practicas recomendadas. 

Para encontrar otros lenguajes para el atributo lang puede vi s i ta r el siguiente enlace: 

www.w3schools.com/tags/ref_language_codes.asp. 


<head> 


Continuemos construyendo nuestra plantilla. El código HTML insertado entre las etiguetas <html> tiene que serdividido entre 


dos secciones principales. Al igual que en versiones previas de HTML, la primera sección es la cabecera y la segunda el 
cuerpo. El siguiente paso, por lo tanto, sera crearestas dos secciones en el código usando los elementos <head> y<body> 
ya conocidos. 

El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de 
apertura yuna de cierre: 


<!DOCTYPE html> 
<html lang="es"> 

<head> 

</head> 

</html> 


Listado 1-3. Usando el elemento <head>. 

La etiqueta no cambió desde versiones anteriores y su propósito sigue siendo exactamente el mismo. Dentro de las 
etiquetas <head> definiremos el titulo de nuestra pagina web, declararemos el set de caracteres correspondiente, 
proveeremos información generał acerca del documento e incorporaremos los archivos externos eon estilos, códigos 
Javascript o incluso imagenes necesarias para generar la pagina en la pantalla. 

Excepto por el titulo y algunos iconos, el resto de la información incorporada en el documento entre estas etiquetas es 
invisible para el usuario. 


<body> 


La siguiente gran sección que es parte principal de la organización de un documento HTML es el cuerpo. El cuerpo 
representa la parte visible de todo documento y es especificado entre etiquetas <body>. Estas etiquetas tampoco han 
cambiado en relación eon versiones previas de HTML: 


<!DOCTYPE html> 
<html lang="es"> 
<head> 

</head> 

<body> 

</body> 

</html> 


Listado 1-4. Usando el elemento <body>. 

Conceptos basicos: Hasta el momento tenemos un código simple pero eon una estructura compleja. Esto es porque el 
código HTML no esta formado por un conjunto de instrucciones secuenciales. HTML es un lenguaje de etiquetas, un 
listado de elementos que usualmente se utilizan en pares y que pueden ser anidados (totalmente contenidos uno 
dentro del otro). En la primera linea del código del Listado 1-4 tenemos una etiqueta simple eon la definición del tipo de 
documento e inmediatamente despues la etiqueta de apertura <html lang="es">. Esta etiqueta y la de cierre 
</html> al finał del listado estan indicando el comienzo del código HTML y su finał. Entre las etiquetas <html> 
insertamos otras etiquetas especificando dos importantes partes de la estructura basica: <head> para la cabecera y 
<body> para el cuerpo del documento. Estas dos etiquetas tambien se utilizan en pares. Mas adelante en este capitulo 
veremos que mas etiquetas son insertadas entre estas ultimas conformando una estructura de arbol eon <html> como 
su raiz. 


<meta> 


Es momento de construir la cabecera del documento. Algunos cambios e innovaciones fueron incorporados dentro de la 
cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento. Esta es una 
etigueta <meta>que especifica como el texto sera presentado en pantalla: 






<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

</body> 

</html> 


Listado 1-5. Usando el elemento <meta>. 

La innovación de este elemento en HTML5, como en la mayoria de los casos, es solo simplificación. La nueva etiqueta 
<meta> para la definición del tipo de caracteres es mas corta y simple. Por supuesto, podemos cambiar el tipo iso-8859-1 
por el necesario para nuestros documentos y agregar otras etiquetas <meta> como description o keywords para definir 
otros aspectos de la pagina web, como es mostrado en el siguiente ejemplo: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name=''description" content="Ejemplo de HTML5"> 
<meta name=''keywords" content="HTML5, CSS3, Javascript"> 

</head> 

<body> 

</body> 

</html> 


Listado 1-6. Agregando mas elementos <meta>. 

Conceptos basicos: Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar información generał 
sobre el documento, pero esta información no es mostrada en la ventana del navegador, es solo importante para 
motores de busqueda y dispositivos que necesitan hacer una vista previa del documento u obtener un sumario de la 
información que contiene. Como comentamos anteriormente, aparte del titulo y algunos iconos, la mayoria de la 
información insertada entre las etiquetas <head> no es visible para los usuarios. En el código del Listado 1-6, el 
atributo name dentro de la etiqueta <meta> especifica su tipo y content declara su valor, pero ninguno de estos valores 
es mostrado en pantalla. Para aprender mas sobre la etiqueta <meta>, visite nuestro sitio web y siga los enlaces 
proporcionados para este capitulo. 

En HTML5 no es necesario cerrar etiquetas simples eon una barra al finał, pero recomendamos utilizarlas por razones de 
compatibilidad. El anterior código se podria escribirde la siguiente manera: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l" /> 

<meta name="description" content="Ejemplo de HTML5" /> 
<meta name="keywords" content="HTML5, CSS3, JavaScript" /> 

</head> 

<body> 

</body> 

</html> 


Listado 1-7. Cierre de etiguetas simples. 






<title> 


La etiqueta <title>, como siempre, simplemente especifica el titulo del documento, y no hay nada nuevo para comentar: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 

<title>Este texto es el titulo del documento</title> 

</head> 

<body> 

</body> 

</html> 


Listado 1-8. Usando la etiqueta <title>. 

Conceptos basicos: El texto entre las etiquetas <title> es el titulo del documento que estamos creando. 
Normalmente este texto es mostrado en la barra superior de la ventana del navegador. 


<link> 


Otro importante elemento que va dentro de la cabecera del documento es <link>. Este elemento es usado para incorporar 
estilos, códigos Javascript, imagenes o iconos desde archivos externos. Uno de los usos mas comunes para <link> es la 
incorporación de archivos eon estilos CSS: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 

<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

</body> 

</html> 


Listado 1-9. Usando el elemento <link>. 

En HTML5 ya no se necesita especificar que tipo de estilos estamos insertando, por lo que el atributo type fue eliminado. 
Solo necesitamos dos atributos para incorporar nuestro archivo de estilos: rei yhref. El atributo rei significa “relación” y es 
acerca de la relación entre el documento y el archivo que estamos incorporando por medio de href. En este caso, el atributo 
rei tiene el valor stylesheet que le dice al navegador que el archivo misestilos. css es un archivo CSS eon estilos 
requeridos para presentar la pagina en pantalla (en el próximo capitulo estudiaremos como utilizar estilos CSS). 

Conceptos basicos: Un archivo de estilos es un grupo de reglas de fermato que ayudaran a cambiar la apariencia de 
nuestra pagina web (porejemplo, el tamańo ycolordel texto). Sin estas reglas, el texto y cualquier otro elemento HTML 
seria mostrado en pantalla utilizando los estilos estandar provistos por el navegador. Los estilos son reglas simples 
que normalmente requieren solo unas pocas lineas de código ypueden ser declarados en el mismo documento. Como 
veremos mas adelante, no es estrictamente necesario obtener esta información de archivos externos pero es una 
practica recomendada. Cargar las reglas CSS desde un documento externo (otro archivo) nos permitira organizar el 
documento principal, inerementar la velocidad de carga y aprovechar las nuevas caracteristicas de HTML5. 

Con esta ultima inserción podemos considerarfinalizado nuestro trabajo en la cabecera. Ahora es tiempo de trabajaren el 
cuerpo, donde la magia ocurre. 









1.3 Estructura del cuerpo 


La estructura del cuerpo (el código entre las etiquetas <body>) generara la parte visible del documento. Este es el código que 
producira nuestra pagina web. 

HTML siempre ofreció diferentes formas de construir y organizar la información dentro del cuerpo de un documento. Uno 
de los primeros elementos provistos para este propósito fue <table>. Las tablas permitfan a los diseńadores acomodar 
datos, texto, imagenes y herramientas dentro de filas ycolumnas de celdas, incluso sin que hayan sido concebidas para este 
propósito. 

En los primeros dias de la web, las tablas fueron una revolución, un gran paso hacia adelante eon respecto a la 
visualización de los documentos y la experiencia ofrecida a los usuarios. Mas adelante, gradualmente, otros elementos 
reemplazaron su función, permitiendo lograr lo mismo eon menos código, facilitando de este modo la creación, permitiendo 
portabilidad yayudando al mantenimiento de los sitios web. 

El elemento <div> comenzó a dominar la escena. Con el surgimiento de webs mas interactivas y la integración de HTML, 
CSS y Javascript, el uso de <div> se volvió una practica comun. Pero este elemento, asl como<table>, no provee 
demasiada información acerca de las parte del cuerpo que esta representando. Desde imagenes a menus, textos, enlaces, 
códigos, formularios, cualquier cosa puede ir entre las etiquetas de apertura y cierre de un elemento <div>. En otras 
palabras, la palabra clave div solo especifica una división en el cuerpo, como la celda de una tabla, pero no ofrece indicio 
alguno sobre que clase de división es, cual es su propósito o que contiene. 

Para los usuarios estas claves o indicios no son importantes, pero para los navegadores la correcta interpretación de que 
hay dentro del documento que se esta procesando puede ser crucial en muchos casos. Luego de la revolución de los 
dispositivos móviles yel surgimiento de diferentes formas en que la gente accede a la web, la identificación de cada parte del 
documento es una tarea que se ha vuelto mas relevante que nunca. 

Considerando todo lo expuesto, HTML5 incorpora nuevos elementos que ayudan a identificar cada sección del documento 
y organizar el cuerpo del mismo. En HTML5 las secciones mas importantes son diferenciadas y la estructura principal ya no 
depende mas de los elementos <div> o <table>. 

Como usamos estos nuevos elementos depende de nosotros, pero las palabras clave otorgadas a cada uno de ellos nos 
dan ayudan a entender sus funciones. Normalmente una pagina o aplicación web esta dividida entre varias areas visuales 
para mejorar la experiencia del usuario yfacilitar la interactividad. Las palabras claves que representan cada nuevo elemento 
de HTML5 estan intimamente relacionadas con estas areas, como veremos pronto. 


Organización 


La Figura 1-1 representa un diseńo comun encontrado en la mayorfa de los sitios webs estos dlas. Apesar del hecho de que 
cada diseńador crea sus propios diseńos, en generał podremos identificar las siguientes secciones en cada sitio web 
estudiado: 



Cabecera 

Barra de Navegación 


Información Principal 


Barra 

Lateral 


Institucional 


Figura 1-1. Representación visual de un clśsico diseńo web. 

En la parte superior, descripto como Cabecera, se encuentra el espacio donde usualmente se ubica el logo, titulo, 
subtitulos y una corta descripción del sitio web o la pagina. 

Inmediatamente debajo, podemos ver la Barra de Navegación en la cual casi todos los desarrolladores ofrecen un menu 
o lista de enlaces eon el propósito de facilitar la navegación a traves del sitio. Los usuarios son guiados desde esta barra 
hacia las diferentes paginas o documentos, normalmente pertenecientes al mismo sitio web. 

El contenido mas relevante de una pagina web se encuentra, en casi todo diseńo, ubicado en su centro. Esta sección 
presenta información y enlaces valiosos. La mayoria de las veces es dividida en varias filas ycolumnas. En el ejemplo de la 
Figura 1-1 se utilizaron solo dos columnas: Información Principal yBarra Lateral, pero esta sección es extremadamente 
flexible y normalmente diseńadores la adaptan acorde a sus necesidades insertando mas columnas, dividiendo cada 
columna entre bloques mas pequeńos o generando diferentes distribuciones y combinaciones. El contenido presentado en 
esta parte del diseńo es usualmente de alta prioridad. En el diseńo de ejemplo, Información Principal podria contener una 
lista de articulos, descripción de productos, entradas de un blog o cualquier otrą información importante, y la Barra Lateral 
podria mostrar una lista de enlaces apuntando hacia cada uno se esos items. En un blog, por ejemplo, esta ultima columna 
ofrecera una lista de enlaces apuntando a cada entrada del blog, información acerca del autor, etc... 

En la base de un diseńo web clasico siempre nos encontramos eon una barra mas que aqui llamamos Institucional. La 
nombramos de esta manera porque esta es el area en donde normalmente se muestra información acerca del sitio web, el 
autor o la empresa, ademas de algunos enlaces eon respecto a reglas, terminos y condiciones y toda información adicional 
que el desarrollador considere importante compartir. La barra Institucional es un complemento de la Cabecera y es parte de 
lo que se considera estos dias la estructura esencial de una pagina web, como podemos apreciar en el siguiente ejemplo: 




Mi Blog © 

Principal | ayuda | contacto /^\ 

Oomingo, 10 de Julio 2011 /^N 

(D 

Lorem ipsum 2 

torem ipsum dolor sit amet, consectetur adiprscing elit. 
Nam adtpiscing, purus et sagitt>s moais, leo d*am 
dapibus quam, ac vanus maurts bgula ut ncque. 

Morbi id matesuada eros. Phasellus tempus bibendum 
vanus. Nulla fac<hs>. Mauns porttltor libero porta tortoc 
faalists eu volutpat purus porttltor. Nuda venenatis 
ipsum id torem grav»de io płuretra crat pheretra. 

Archivo 

> 2011(2) 

> Julio (2) 

Lorem ipsum 2 
Lorem ipsum 1 

Acerca de 

carlos 

Ver mi Perfil > 

Domingo, 8 de Julio 2011 


Lorem ipsum 1 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nam adipiscing, purus et sagittis moflis, leo <ham 
dapibus quam, ac vanus mauris ligula ut oegue. 

Morbi id malesuada eros. Phasellus tempus bibeodum 
var»us. Nulla facllis*. Mauns porttitor libero porta tortor 
foolisis eu volutpat purus porttltor Nulla venenatis 
ipsum id lorem gravida m pharetra erat pharetra. 
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Figura 1-2. Representación visual de un clśsico diseńo para blogs. 


La Figura 1-2 es una representación de un blog normal. En este ejemplo se puede claramente identificar cada parte del 
diseńo considerado anteriormente. 

1. Cabecera 

2. Barra de Navegación 

3. Sección de Información Principal 

4. Barra Lateral 

5. El pie o la barra Institucional 

Esta simple representación de un blog nos puede ayudar a entender que cada sección definida en un sitio web tiene un 
propósito. Aveces este propósito no es claro pero en esencia se encuentra siempre alit, ayudandonos a reconocer cualquiera 
de las secciones descriptas anteriormente en todo diseńo. 

HTML5 considera esta estructura basica yprovee nuevos elementos para diferenciar y declarar cada una de sus partes.A 
partir de ahora podemos decir al navegador para que es cada sección: 





<header> </header> 

<nav> </nav> 


<section> 

<aside> 

</section> 

</aside> 


<footer> </footer> 


Figura 1-3. Representación visual de un diseno utilizando elementos HTML5. 

La Figura 1-3 muestra el tipico diseno presentado anteriormente, pero esta vez eon los correspondientes elementos 
HTML5 para cada sección (incluyendo etiguetas de apertura ycierre). 


<header> 


Uno de los nuevos elementos incorporados en HTML5 es <header>. El elemento <header> no debe ser confundido eon 
<head> usado antes para construir la cabecera del documento. Del mismo modo que <head>, la intención de <header> es 
proveer información introductoria (titulos, subtltulos, logos), pero difiere eon respecto a <head> en su alcance. Mientras que 
el elemento <head>tiene el propósito de proveer información acerca de todo el documento, <header> es usado solo para el 
cuerpo o secciones especificas dentro del cuerpo: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 

</header> 

</body> 

</html> 


Listado 1-10. Usando el elemento <header>. 

En el Listado 1-10, definimos el titulo de la pagina web utilizando el elemento <header>. Recuerde que esta cabecera no 
es la misma que la utilizada previamente para definir el titulo del documento. La inserción del elemento <header> representa 
el comienzo del cuerpo y por lo tanto de la parte yisible del documento. De ahora en mas sera posible ver los resultados de 








nuestro código en la ventana del navegador. 

Hagalo usted mismo:Si siguió las instrucciones desde el comienzo de este capitulo ya deberia contar eon un archivo 
de texto creado eon todos los códigos estudiados hasta el momento y listo para ser probado. Si no es asi, todo lo que 
debe hacer es copiar el código en el Listado 1 -10 dentro de un archivo de texto vado utilizando cualquier editor de texto 
(como el Bloc de Notas de Windows, por ejemplo) y grabar el archivo eon el nombre de su agrado y la extensión .html. 
Para ver el código en funcionamiento, abra el archivo en un navegador compatible eon HTML5 (puede hacerlo eon un 
dobie clic sobre el archivo en su explorador de archivos). 

Conceptos basicos: Entre las etiquetas <header> en el Listado 1-10 hay un elemento que probablemente no conoce. 
El elemento <hl> es un viejo elemento HTML usado para definir titulos. El numero indica la importancia del tltulo. El 
elemento <hl> es el mas importante y<h6> el de menor importancia, por lo tanto <hl> sera utilizado para mostrar el 
tltulo principal y los demas para subtitulos o subtitulos internos. Mas adelante veremos como estos elementos trabajan 
en HTML5. 


<nav> 


Siguiendo eon nuestro ejemplo, la siguiente sección es la Barra de Navegación. Esta barra es generada en HTML5 eon el 
elemento <nav>: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el tltulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el tltulo principal del sitio web</hl> 
</header> 

<nav> 

<ul> 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

</body> 

</html> 


Listado 1-11. Usando el elemento <nav>. 

Como se puede apreciar en el Listado 1-11, el elemento <nav> se eneuentra dentro de las etiquetas <body> pero es 
ubicado despues de la etiqueta de cierre de la cabecera (</header>), no dentro de las etiquetas <header>. Esto es porque 
<nav> no es parte de la cabecera sino una nueva sección. 

Anteriormente dijimos que la estructura y el orden que elegimos para colocar los elementos HTML5 dependen de 
nosotros. Esto significa que HTML5 es versatil ysolo nos otorga los parametros y elementos basicos eon los que trabajar, 
pero como usarlos sera exclusivamente decisión nuestra. Un ejemplo de esta versatilidad es que el elemento <nav> podria 
ser insertado dentro del elemento <header> o en cualquier otrą parte del cuerpo. Sin embargo, siempre se debe considerar 
que estas etiquetas fueron creadas para brindar información a los navegadores yayudara cada nuevo programa ydispositivo 
en el mercado a identificar las partes mas relevantes del documento. Para conservar nuestro código portable y comprensible, 
recomendamos como buena practica seguir lo que marcan los estandares y mantener todo tan claro como sea posible. El 
elemento <nav> fue creado para ofrecer ayuda para la navegación, como en menus principales o grandes bloques de 
enlaces, y deberia ser utilizado de esa manera. 

Conceptos basicos: En el ejemplo del Listado 1-11 generamos las opciones del menu para nuestra pagina web. Entre 
las etiquetas <nav> hay dos elementos que son utilizados para crear una lista. El propósito del elemento <ul> es 
definir la lista. Anidado entre las etiguetas <ul> encontramos varias etiguetas <li> eon diferentes textos representando 




las opciones del menu. Las etiquetas <li>, como probablemente ya se ha dado cuenta, son usadas para definir cada 
item de la lista. El propósito de este libro no es enseńarle conceptos basicos sobre HTML, si necesita mas información 
acerca de elementos regulares de este lenguaje visite nuestro sitio web y siga los enlaces correspondientes a este 
capitulo. 


<section> 


Siguiendo nuestro diseńo estandar nos encontramos eon las columnas que en la Figura 1-1 llamamos Información Principal 
y Barra Lateral. Como explicamos anteriormente, la columna Información Principal contiene la información mas relevante 
del documento ypuede ser encontrada en diferentes formas (porejemplo, dividida en varios bloques o columnas). Debido a 
que el propósito de estas columnas es mas generał, el elemento en HTML5 que especifica estas secciones se Marna 
simplemente <section>: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 
</header> 

<nav> 

<ul> 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

</section> 

</body> 

</html> 


Listado 1-12. Usando el elemento <section>. 

Al igual que la Barra de Navegación, la columna Información Principal es una sección aparte. Por este motivo, la sección 
para Información Principal va debajo de la etiqueta de cierre </nav>. 

Hagalo usted mismo: Compare el ultimo código en el Listado 1-12 eon el diseńo de la Figura 1-3 para comprender 
como las etiquetas son ubicadas en el código yque sección cada una de ellas genera en la representación visual de la 
pagina web. 

IMPORTANTE: Las etiquetas que representan cada sección del documento estan localizadas en el código en forma de 
lista, unas sobre otras, pero en el sitio web algunas de estas secciones se ubicaran lado a lado (las columnas 
Información Principal y Barra Lateral son un claro ejemplo). En HTML5, la responsabilidad por la representación de los 
elementos en la pantalla fue delegada a CSS. El diseńo sera logrado asignando estilos CSS a cada elemento HTML. 
Estudiaremos CSS en el próximo capitulo. 


<aside> 


En un tipico diseńo web (Figura 1-1) la columna llamada Barra Lateral se ubica al lado de la columna Información Principal. 
Esta es una columna o sección que normalmente contiene datos relacionados eon la información principal pero que no son 
relevantes o igual de importantes. 




En el diseńo de un blog, por ejemplo, la Barra Lateral contendra una lista de enlaces. En el ejemplo de la Figura 1-2, los 
enlaces apuntan a cada una de las entradas del blog y ofrecen información adicional sobre el autor (numero 4). La 
información dentro de esta barra esta relacionada eon la información principal pero no es relevante por si misma. Siguiendo 
el mismo ejemplo podemos decirque las entradas del blog son relevantes pero los enlaces ylas pequeńas reseńas sobre 
esas entradas son solo una ayuda para la navegación pero no lo que al lector realmente le interesa. 

En HTML5 podemos diferenciar esta clase secundaria de información utilizando el elemento <aside>: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 
</header> 

<nav> 

<ul> 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

</section> 

<aside> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 

</aside> 

</body> 

</html> 


Listado 1-13. Usando el elemento <aside>. 

El elemento <aside> podrfa estar ubicado del lado derecho o izquierdo de nuestra pagina de ejemplo, la etiqueta no tiene 
una posición predefinida. El elemento <aside> solo describe la información que contiene, no el lugar dentro de la estructura. 
Este elemento puede estar ubicado en cualquier parte del diseńo y ser usado siempre y cuando su contenido no sea 
considerado como el contenido principal del documento. Por ejemplo, podemos usar<aside> dentro del elemento 
<section> o incluso insertado entre la información relevante, como en el caso de una cita. 


<footer> 


Para finalizar la construcción de la plantilla o estructura elemental de nuestro documento HTML5, solo necesitamos un 
elemento mas. Ya contamos eon la cabecera del cuerpo, secciones eon ayuda para la navegación, información importante y 
hasta una barra lateral eon datos adicionales, por lo tanto lo unico que nos queda por hacer es cerrar nuestro diseńo para 
otorgarle un finał al cuerpo del documento. HTML5 provee un elemento especifico para este propósito llamado <footer>: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 





<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 
</header> 

<nav> 

<ul> 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

</section> 

<aside> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 
</aside> 

<footer> 

Derechos Reservados Scopy; 2010-2011 

</footer> 

</body> 

</html> 


Listado 1-14. Usando el elemento <footer>. 

En el tipico diseńo de una pagina web (Figura 1-1 ) la sección llamada Institucional sera definida por etiquetas <footer>. 
Esto es debido a que la barra representa el finał (o pie) del documento yesta parte de la pagina web es normalmente usada 
para compartir información generał sobre el autor o la organización detras del proyecto. 

Generalmente, el elemento <footer> representara el finał del cuerpo de nuestro documento y tendra el propósito 
descripto anteriormente. Sin embargo, <footer> puede ser usado multiples veces dentro del cuerpo para representar 
tambien el finał de diferentes secciones (del mismo modo que la etiqueta <header>). Estudiaremos esta ultima caracteristica 
mas adelante. 





1.4 Dentro del cuerpo 


El cuerpo de nuestro documento esta listo. La estructura basica de nuestro sitio web fue finalizada, pero aun tenemos que 
trabajar en el contenido. Los elementos HTML5 estudiados hasta el momento nos ayudan a identificar cada sección del 
diseńo y asignar un propósito intrinseco a cada una de ellas, pero lo que es realmente importante para nuestro sitio web se 
encuentra en el interior de estas secciones. 

La mayoria de los elementos ya estudiados fueron creados para construir una estructura para el documento HTML que 
pueda ser identificada y reconocida por los navegadores y nuevos dispositivos. Aprendimos acerca de la etiqueta <body> 
usada para declarar el cuerpo o parte visible del documento, la etiqueta <header> eon la que agrupamos información 
importante para el cuerpo, la etiqueta <nav> que provee ayuda para la navegación del sitio web, la etiqueta <section> 
necesaria para contener la información mas relevante, ytambien <aside> y<footer> para ofrecer información adicional de 
cada sección ydel documento mismo. Pero ninguno de estos elementos declara algo acerca del contenido. Todos tienen un 
especifico propósito estructural. 

Mas profundo nos introducimos dentro del documento mas cerca nos encontramos de la definición del contenido. Esta 
información estara compuesta por diferentes elementos visuales como titulos, textos, imagenes, videos y aplicaciones 
interactivas, entre otros. Necesitamos poder diferenciar estos elementos y establecer una relación entre ellos dentro de la 
estructura. 


<article> 


El diseńo considerado anteriormente (Figura 1-1) es el mas comun y representa una estructura esencial para los sitios web 
estos dias, pero es ademas ejemplo de como el contenido clave es mostrado en pantalla. Del mismo modo que los blogs 
estan divididos en entradas, sitios web normalmente presentan información relevante dividida en partes que comparten 
similares caracteristicas. El elemento <article> nos permite identificar cada una de estas partes: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 
</header> 

<nav> 

<ul> 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

<article> 

Este es el texto de mi primer mensaje 

</article> 

<article> 

Este es el texto de mi segundo mensaje 

</article> 

</section> 

<aside> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 

</aside> 

<footer> 

Derechos Reservados Scopy; 2010-2011 


</footer> 

</body> 

</html> 


Listado 1-15. Usando el elemento <article>. 

Como puede observarse en el código del Listado 1-15, las etiquetas <article> se encuentran ubicadas dentro del 
elemento <section>. Las etiquetas <article> en nuestro ejemplo pertenecen a esta sección, son sus hijos, del mismo 
modo que cada elemento dentro de las etiquetas <body> es hijo del cuerpo. Yal igual que cada elemento hijo del cuerpo, las 
etiquetas <article>son ubicadas una sobre otrą, como es mostrado en la Figura 1-4. 

Conceptos basicos: Como dijimos anteriormente, la estructura de un documento HTML puede ser descripta como un 
arbol, eon el elemento <html> como su raiz. Otrą forma de describir la relación entre elementos es nombrarlos como 
padres, hijos y hermanos, de aeuerdo a la posición que ocupan dentro de esa misma estructura. Por ejemplo, en un 
tipico documento HTML el elemento <body> es hijo del elemento <html> y hermano del elemento <head>. Ambos, 
<body> y<head>, tienen al elemento <html>corno su padre. 



Figura 1-4. Representación visual de las etiquetas <article> que fueron incluidas 
para contenerinformación retevante de la pagina web. 

El elemento <article> no esta limitado por su nombre (no se limita, por ejemplo, a artlculos de noticias). Este elemento 
fue creado eon la intención de contener unidades independientes de contenido, por lo que puede incluir mensajes de foros, 
articulos de una revista digital, entradas de blog, comentarios de usuarios, etc... Lo que hace es agrupar porciones de 
información que estan relacionadas entre siindependientemente de su naturaleza. 

Como una parte independiente del documento, el contenido de cada elemento <article> tendra su propia estructura. 
Para definir esta estructura, podemos aprovechar la versatilidad de los elementos <header> y<footer> estudiados 
anteriormente. Estos elementos son portables y pueden ser usados no solo para definir los llmites del cuerpo sino tambien 
en cualguier sección de nuestro documento: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
clink rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 








<header> 

<hl>Este es el titulo principal del sitio web</hl> 
</header> 

<nav> 

<ul> 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

<article> 

<header> 

<hl>Titulo del mensaje uno</hl> 

</header> 

Este es el texto de mi primer mensaje 
<footer> 

<p>comentarios (0)</p> 

</footer> 

</article> 

<article> 

<header> 

<hl>Titulo del mensaje dos</hl> 

</header> 

Este es el texto de mi segundo mensaje 
<footer> 

<p>comentarios (0)</p> 

</footer> 

</article> 

</section> 

<aside> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 
</aside> 

<footer> 

Derechos Reservados Scopy; 2010-2011 
</footer> 

</body> 

</html> 


Listado 1-16. Construyendo la estructura de <article>. 

Los dos mensajes insertados en el código del Listado 1-16 fueron construidos eon el elemento <article> y tienen una 
estructura especifica. En la parte superior de esta estructura incluimos las etiquetas <header> conteniendo el titulo definido 
eon el elemento <hl>, debajo se eneuentra el contenido mismo del mensaje y sobre el finał, luego del texto, vienen las 
etiguetas <footer> especificando la cantidad de comentarios recibidos. 


<hgroup> 


Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de cada <article>, incorporamos 
elementos <hl> para declarar un titulo. Basicamente, las etiquetas <hl> son todo lo que necesitamos para crear una llnea 
de cabecera para cada parte del documento, pero es normal que necesitemos tambien agregar subtltulos o mas información 
que especifique de que se trata la pagina web o una sección en particular. De hecho, el elemento <header> fue creado para 
contener tambien otros elementos como tablas de contenido, formularios de busqueda o textos cortos y logos. 

Para construir este tipo de cabeceras, podemos aprovechar el resto de las etiquetas H, como <hl>, <h2>, <h3>, <h4>, 
<h5> y <h6>, pero siempre considerando que por propósitos de procesamiento interno, y para evitar generar multiples 
secciones durante la interpretación del documento por parte del navegador, estas etiquetas deben ser agrupadas juntas. Por 
esta razón, HTML5 provee el elemento <hgroup>: 


<!DOCTYPE html> 
<html lang="es"> 



<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 
</header> 

<nav> 

<ul> 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

<article> 

<header> 

<hgroup> 

<hl>Titulo del mensaje uno</hl> 

<h2>Subtitulo del mensaje uno</h2> 

</hgroup> 

<p>publicado 10-12-2011</p> 

</header> 

Este es el texto de mi primer mensaje 
<footer> 

<p>comentarios (0)</p> 

</footer> 

</article> 

<article> 

<header> 

<hgroup> 

<hl>Titulo del mensaje dos</hl> 

<h2>Subtitulo del mensaje dos</h2> 

</hgroup> 

<p>publicado 15-12-2011</p> 

</header> 

Este es el texto de mi segundo mensaje 
<footer> 

<p>comentarios (0)</p> 

</footer> 

</article> 

</section> 

<aside> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 

</aside> 

<footer> 

Derechos Reservados Scopy; 2010-2011 
</footer> 

</body> 

</html> 


Listado 1-17. Usando el elemento <hgroup>. 

Las etiquetas H deben conservar su jerarquia, lo que significa que debemos primero declarar la etiqueta <hl>, luego usar 
<h2> para subtftulos y asi sucesivamente. Sin embargo, a dlferencia de anteriores versiones de HTML, HTML5 nos deja 
reusar las etiquetas H y construir esta jerarquia una y otrą vezen cada sección del documento. En el ejemplo del Listado 1-17, 
agregamos un subtitulo y datos adicionales a cada mensaje. Los titulos y subtitulos fueron agrupados juntos utilizando 
<hgroup>, recreando de este modo la jerarquia <hl>y<h2>en cada elemento <article>. 

IMPORTANTE: El elemento <hgroup> es necesario cuando tenemos un titulo y subtitulo o mas etiquetas H juntas en la 
misma cabecera. Este elemento puede contener solo etiquetas H y esta fue la razón por la que en nuestro ejemplo 




dejamos los datos adicionales afuera. Si solo dispone de una etiqueta<hl> o la etiqueta <hl> junto eon datos 
adicionales, no tiene que agrupar estos elementos juntos. Por ejemplo, en la cabecera del cuerpo (<header>) no 
usamos este elemento porque solo tenemos una etiqueta H en su interior. Siempre reeuerde que <hgroup> fue creado 
solo eon la intención de agrupar etiquetas H, exactamente como su nombre lo indica. 

Navegadores y programas que ejecutan y presentan en la pantalla sitios webs leen el código HTML y crean su propia 
estructura interna para interpretar y procesar cada elemento. Esta estructura interna esta dividida en secciones que no tienen 
nada que ver eon las divisiones en el diseńo o el elemento <section>. Estas son secciones conceptuales generadas 
durante la interpretación del código. El elemento <header> no crea una de estas secciones por si mismo, lo que significa 
que los elementos dentro de <header> representaran diferentes niveles e internamente pueden generar diferentes 
secciones. El elemento <hgroup>fue creado eon el propósito de agrupar las etiquetas H y evitar interpretaciones incorrectas 
por parte de los navegadores. 

Conceptos basicos: lo que llamamos “información adicional” dentro de la cabecera en nuestra descripción previa es 
conocido como Metadata. Metadata es un conjunto de datos que describen y proveen información acerca de otro grupo 
de datos. En nuestro ejemplo, Metadata es la fecha en la cual cada mensaje fue publicado. 


<figure> y <figcaption> 


La etiqueta <figure> fue creada para ayudarnos a ser aun mas especfficos a la hora de declarar el contenido del 
documento. Antes de que este elemento sea introducido, no podlamos identificar el contenido que era parte de la información 
pero a la vez independiente, como ilustraciones, fotos, videos, etc... Normalmente estos elementos son parte del contenido 
relevante pero pueden ser extraidos o movidos a otrą parte sin afectar o interrumpir el flujo del documento. Cuando nos 
encontramos eon esta clase de información, las etiguetas <figure> pueden serusadas para identificarla: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 

<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 

<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 
</header> 

<nav> 

<ul> 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

<article> 

<header> 

<hgroup> 

<hl>Titulo del mensaje uno</hl> 

<h2>Subtitulo del mensaje uno</h2> 

</hgroup> 

<p>publicado 10-12-2011</p> 

</header> 

Este es el texto de mi primer mensaje 

<figure> 

<img src="http://minkbooks.com/eontent/myimage.jpg"> 
<figcaption> 

Esta es la imagen del primer mensaje 
</figcaption> 

</figure> 

<footer> 

<p>comentarios (0)</p> 


</footer> 

</article> 

<article> 

<header> 

<hgroup> 

<hl>Titulo del mensaje dos</hl> 
<h2>Subtitulo del mensaje dos</h2> 
</hgroup> 

<p>publicado 15-12-2011</p> 

</header> 

Este es el texto de mi segundo mensaje 
<footer> 

<p>comentarios (0)</p> 

</footer> 

</article> 

</section> 

<aside> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 
</aside> 

<footer> 

Derechos Reservados Scopy; 2010-2011 
</footer> 

</body> 

</html> 


Listado 1-18. Usando los elementos <figure> y <figcaption>. 

En el Listado 1-18, en el primer mensaje, luego del texto insertamos una imagen (<img 
src="http: / /minkbooks. com/ eon tent/my image. jpg">). Esta es una practica comun, a menudo el texto es enriquecido 
eon imagenes o vldeos. Las etiquetas <figure> nos permiten envolver estos complementos visuales y diferenciarlos asi de 
la información mas relevante. 

Tambien en el Listado 1-18 se puede observar un elemento extra dentro de <figure>. Normalmente, unidades de 
información como imagenes o videos son descriptas eon un corto texto debajo. HTML5 provee un elemento para ubicar e 
identificar estos titulos descriptivos. Las etiquetas <figcaption> encierran el texto relacionado eon <figure> y establecen 
una relación entre ambos elementos ysu contenido. 



1.5 Nuevos y viejos elementos 


HTML5 fue desarrollado eon la intención de simplificar, especificar y organizar el código. Para lograr este propósito, nuevas 
etiquetas y atributos fueron agregados y HTML fue completamente integrado a CSS y Javascript. Estas incorporaciones y 
mejoras de versiones previas estan relacionadas no solo eon nuevos elementos sino tambien eon como usamos los ya 
existentes. 


<mark> 


La etiqueta <mark> fue agregada para resaltar parte de un texto que originalmente no era considerado importante pero ahora 
es relevante acorde eon las acciones del usuario. El ejemplo que mas se ajusta a este caso es un resultado de busqueda. El 
elemento <mark> resaltara la parte del texto que concuerda eon el texto buscado: 


<span>Mi <mark>coche</mark> es rojo</span> 


Listado 1-19. Uso del elemento <mark> para resaltar la palabra “coche”. 

Si un usuario realiza una busqueda de la palabra “coche”, por ejemplo, los resultados podrlan ser mostrados eon el 
código del Listado 1-19. La frase del ejemplo representa los resultados de la busqueda y las etiquetas <mark> en el medio 
encierran lo que era el texto buscado (la palabra “coche”). En algunos navegadores, esta palabra sera resaltada eon un fondo 
amarillo por defecto, pero siempre podemos sobrescribir estos estilos eon los nuestros utilizando CSS, como veremos en 
próximos capltulos. 

En el pasado, normalmente obtenlamos similares resultados usando el elemento <b>. El agregado de <mark> tiene el 
objetivo de cambiarel significado yotorgarun nuevo propósito para estos yotros elementos relacionados: 

• <em> es para indicar enfasis (reemplazando la etiąueta <i> que utilizabamos anteriormente). 

• <strong> es para indicar importancia. 

• <mark> es para resaltar texto que es relevante de aeuerdo eon las circunstancias. 

• <b> deberla ser usado solo cuando no hay otro elemento mas apropiado para la situación. 


<small> 


La nueva especificidad de HTML es tambien evidente en elementos como <small>. Previamente este elemento era utilizado 
eon la intención de presentar cualquier texto eon letra pequefia. La palabra clave referenciaba el tamańo del texto, 
independientemente de su significado. En HTML5, el nuevo propósito de <small> es presentar la llamada letra pequeria, 
como impresiones legałeś, descargos, etc... 


<small>Derechos Reservados &copy; 2011 MinkBooks</small> 


Listado 1-20. Inclusión de información legał eon el elemento <small>. 


<cite> 

Otro elemento que ha cambiado su naturaleza para volverse mas especlfico es <cite>. Ahora las etiquetas <cite> encierran 
el tltulo de un trabajo, como un libro, una pellcula, una canción, etc... 

<span>Amo la pellcula <cite>Tentaciones</citeX/span> 


Listado 1-21. Citando una pellcula eon el elemento <cite>. 









<address> 


El elemento <address> es un viejo elemento convertido en un elemento estructural. No necesitamos usarlo previamente 
para construir nuestra plantilla, sin embargo podrfa ubicarse perfectamente en algunas situaciones en las que debemos 
presentar información de contacto relacionada eon el contenido del elemento <article> o el cuerpo completo. 

Este elemento deberia ser incluido dentro de <footer>, como en el siguiente ejemplo: 


<article> 

<header> 

<hl>Titulo del mensaje </hl> 

</header> 

Este es el texto del mensaje 
<footer> 

<address> 

<a href="http://www.jdgauchat.com">JD Gauchat</a> 

</address> 

</footer> 

</article> 


Listado 1-22. Agregando información de contacto a un <article>. 


<time> 


En cada <article>de nuestra ultima plantilla (Listado 1-18), incluimos la fecha indicando cuando el mensaje fue publicado. 
Para esto usamos un simple elemento <p> dentro de la cabecera (<header>) del mensaje, pero existe un elemento en 
HTML5 especifico para este propósito. El elemento <time> nos permite declarar un texto comprensible para humanos y 
navegadores que representa fecha y hora: 


<article> 

<header> 

<hl>Tltulo del mensaje dos</hl> 

<time datetime="2011-10-12" pubdate>publicado 12-10-2011</time> 

</header> 

Este es el texto del mensaje 
</article> 


Listado 1-23. Fecha y hora usando el elemento <time>. 

En el Listado 1-23, el elemento <p> usado en ejemplos previos fue reemplazado por el nuevo elemento <time> para 
mostrar la fecha en la que el mensaje fue publicado. El atributo datetime tiene el valor que representa la fecha comprensible 
para el navegador (timestamp). El formato de este valor debera seguir un patron similar al del siguiente ejemplo: 2011-10- 
12T12:10:45. Tambien incluimos el atributo pubdate, el cual solo es agregado para indicar que el valor del atributo 
datetime representa la fecha de publicación. 





1.6 Referenda rapida 


En la especificación HTML5, HTML esta a cargo de la estructura del documento y provee un grupo completo de nuevos 
elementos para este propósito. La especificación tambien incluye algunos elementos eon la unica tarea de proveer estilos. 
Esta es una lista de los que consideramos mas relevantes: 

IMPORTANTE: Para una completa referenda de los elementos HTML incluidos en la especificación, visite nuestro sitio 

web ysiga los enlaces correspondientes a este capitulo. 

<header> Este elemento presenta información introductoria y puede ser aplicado en diferentes secciones del 
documento. Tiene el propósito de contener la cabecera de una sección pero tambien puede ser utilizado para 
agrupar indices, formularios de busqueda, logos, etc... 

<nav> Este elemento indica una sección de enlaces eon propósitos de navegación, como menus o fndices. No todos 
los enlaces dentro de una pagina web tienen que estar dentro de un elemento <nav>, solo aquellos que forman 
partes de bloques de navegación. 

<section> Este elemento representa una sección generał del documento. Es usualmente utilizado para construir varios 
bloques de contenido (por ejemplo, columnas) eon el propósito de ordenar el contenido que comparte una 
caracteristica especifica, como capitulos o paginas de un libro, grupo de noticias, articulos, etc... 

<aside> Este elemento representa contenido que esta relacionado eon el contenido principal pero no es parte del 
mismo. Ejemplos pueden sercitas, información en barras laterales, publicidad, etc... 

<footer> Este elemento representa información adicional sobre su elemento padre. Por ejemplo, un elemento 
<footer> insertado al finał del cuerpo proveera información adicional sobre el cuerpo del documento, como el pie 
normal de una pagina web. Puede ser usado no solo para el cuerpo sino tambien para diferentes secciones dentro 
del cuerpo, otorgando información adicional sobre estas secciones especificas. 

<article> Este elemento representa una porción independiente de información relevante (por ejemplo, cada artlculo de 
un periódico o cada entrada de un blog). El elemento <article> puede ser anidado y usado para mostrar una lista 
dentro de otrą lista de items relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo. 

<hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene multiples niveles (por ejemplo, 
una cabecera eon titulo ysubtitulo). 

<figure> Este elemento representa una porción independiente de contenido (por ejemplo, imagenes, diagramas o 
videos) que son referenciadas desde el contenido principal. Esta es información que puede ser removida sin afectar 
el fluido del resto del contenido. 

<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeńo texto relacionado eon el contenido de un 
elemento <figure>, como la descripción de una imagen. 

<mark> Este elemento resalta un texto que tiene relevancia en una situación en particular o que ha sido mostrado en 
respuesta de la actividad del usuario. 

<small> Este elemento representa contenido al margen, como letra pequena (por ejemplo, descargos, restricciones 
legałeś, declaración de derechos, etc...). 

<cite> Este elemento es usado para mostrar el titulo de un trabajo (libro, pelicula, poema, etc...). 

<address> Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es 
recomendable que sea insertado dentro de un elemento <footer>. 

<time> Este elemento se utiliza para mostrar fecha yhora en formatos comprensibles por los usuarios yel navegador. 
El valor para los usuarios es ubicado entre las etiquetas mientras que el especffico para programas y navegadores 
es incluido como el valor del atributo datetime. Un segundo atributo optativo llamado pubdate es usado para 
indicar que el valor de datetime es la fecha de publicación. 




Capitulo 2 

Estilos CSS y modelos de caja 


2.1 CSS y HTML 


Como aclaramos anteriormente, la nueva especificación de HTML (HTML5) no describe solo los nuevos elementos HTML o el 
lenguaje mismo. La web demanda diseńo y funcionalidad, no solo organización estructural o definición de secciones. En este 
nuevo paradigma, HTML se presenta junto eon CSS y Javascript como un unico instrumento integrado. 

La función de cada tecnologia ya ha sido explicada en capitulos previos, asi como los nuevos elementos HTML 
responsables de la estructura del documento. Ahora es momento de analizar CSS, su relevancia dentro de esta unión 
estrategica ysu influencia sobre la presentación de documentos HTML. 

Oficialmente CSS nada tiene que ver eon HTML5. CSS no es parte de la especificación y nunca lo fue. Este lenguaje es, de 
hecho, un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML. Al comienzo, atributos 
dentro de las etiquetas HTML proveian estilos esenciales para cada elemento, pero a medida que el lenguaje evolucionó, la 
escritura de códigos se volvió mas compleja y HTML por sf mismo no pudo mas satisfacer las demandas de diseńadores. En 
consecuencia, CSS pronto fue adoptado como la forma de separar la estructura de la presentación. Desde entonces, CSS ha 
crecido y ganado importancia, pero siempre desarrollado en paralelo, enfocado en las necesidades de los diseńadores y 
apartado del proceso de evolución de HTML. 

La versión 3 de CSS sigue el mismo camino, pero esta vezcon un mayor compromiso. La especificación de HTML5 fue 
desarrollada considerando CSS a cargo del diseńo. Debido a esta consideración, la integración entre HTML y CSS es ahora 
vital para el desarrollo web y esta es la razón por la que cada vez que mencionamos HTML5 tambien estamos haciendo 
referenda a CSS3, aunque oficialmente se tratę de dos tecnologias completamente separadas. 

En este momento las nuevas caracteristicas incorporadas en CSS3 estan siendo implementadas e incluidas junto al 
resto de la especificación en navegadores compatibles eon HTML5. En este capitulo, vamos a estudiar conceptos basicos de 
CSS y las nuevas tecnicas de CSS3 ya disponibles para presentación y estructuración. Tambien aprenderemos como utilizar 
los nuevos selectores y pseudo clases que hacen mas facil la selección e identificación de elementos HTML. 

Conceptos basicos: CSS es un lenguaje que trabaja junto eon HTML para proveer estilos visuales a los elementos del 
documento, como tamańo, color, fondo, bordes, etc... 

IMPORTANTE: En este momento las nuevas incorporaciones de CSS3 estan siendo implementadas en las ultimas 
versiones de los navegadores mas populares, pero algunas de ellas se eneuentran aun en estado experimental. Por 
esta razón, estos nuevos estilos deberan ser precedidos por prefijos tales corno-moz- o -webkit- para ser 
efectivamente interpretados. Analizaremos este importante asunto mas adelante. 


2.2 Estilos y estructura 


A pesar de que cada navegador garantiza estilos por defecto para cada uno de los elementos HTML, estos estilos no 
necesariamente satisfacen los requerimientos de cada diseńador. Normalmente se encuentran muy distanciados de lo que 
queremos para nuestros sitios webs. Diseńadores y desarrolladores a menudo deben aplicar sus propios estilos para 
obtener la organización y el efecto visual que realmente desean. 

IMPORTANTE: En esta parte del capitulo vamos a revisar estilos CSS y explicar algunas tecnicas basicas para definir la 
estructura de un documento. Si usted ya se encuentra familiarizado eon estos conceptos, sientase librę de obviar las 
partes que ya conoce. 


Elementos błock 


Con respecto a la estructura, basicamente cada navegador ordena los elementos por defecto de aeuerdo a su tipo: błock 
(blogue) o inline (en linea). Esta clasificación esta asociada con la forma en que los elementos son mostrados en pantalla. 


• Elementos błock son posicionados uno sobre otro hacia abajo en la pagina. 

• Elementos inline son posicionados lado a lado, uno al lado del otro en la misma lrnea, sin ningun salto de lfnea a menos que ya no haya 
mas espacio horizontal para ubicarlos. 


Casi todos los elementos estructurales en nuestros documentos seran tratados por los navegadores como elementos 
błock por defecto. Esto significa que cada elemento HTML que representa una parte de la organización visual (por ejemplo, 
<section>, <nav>, <header>, <footer>, <div>) sera posicionado debajo del anterior. 

En el Capitulo 1 creamos un documento HTML con la intención de reproducir un sitio web tradicional. El diseńo incluyó 
barras horizontales ydos columnas en el medio. Debido a la forma en que los navegadores muestran estos elementos por 
defecto, el resultado en la pantalla esta muy lejos de nuestras expectativas. Tan pronto como el archivo HTML con el código 
del Listado 1-18, Capitulo 1, es abierto en el navegador, la posición errónea en la pantalla de las dos columnas definidas por 
los elementos <section> y<aside> es claramente visible. Una columna esta debajo de la otrą en lugar de estar a su lado, 
como corresponderfa. Cada bloque (błock) es mostrado por defecto tan ancho como sea posible, tan alto como la 
información que contiene y uno sobre otro, como se muestra en la Figura 2-1. 


<header> 

</header> 

<nav> 

</nav> 

<section> 

</section> 

<aside> 

</aside> 

<footer> 

</footer> 


Figura 2-1. Represerttación visual de una pagina web mostrada con estilos por defecto. 



Modelos de caja 


Para aprender como podemos crear nuestra propia organización de los elementos en pantalla, debemos primero entender 
como los navegadores procesan el código HTML. Los navegadores consideran cada elemento HTML como una caja. Una 
pagina web es en realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son establecidas porestilos 
provistos por los navegadores o por los diseńadores usando CSS. 

CSS tiene un set predeterminado de propiedades destinados a sobrescribir los estilos provistos por navegadores y 
obtener la organización deseada. Estas propiedades no son especlficas, tienen que ser combinadas para formar reglas que 
luego seran usadas para agrupar cajas y obtener la correcta disposición en pantalla. La combinación de estas reglas es 
normalmente llamada modelo o sistema de disposición. Todas estas reglas aplicadas juntas constituyen lo que se Marna un 
modelo de caja. 

Existe solo un modelo de caja que es considerado estandar estos dlas, y muchos otros que aun se encuentran en estado 
experimental. El modelo valido yampliamente adoptado es el llamado Modelo de Caja Tradicional, el cual ha sido usado 
desde la primera versión de CSS. 

Aunque este modelo ha probado serefectivo, algunos modelos experimentales intentan superarsus deficiencias, pero la 
falta de consenso sobre el reemplazo mas adecuado aun mantiene a este viejo modelo en vigencia y la mayorfa de los sitios 
webs programados en HTML5 lo continuan utilizando. 



2.3 Conceptos basicos sobre estilos 


Antes de comenzar a insertar reglas CSS en nuestro archivo de estilos y aplicar un modelo de caja, debemos revisar los 
conceptos basicos sobre estilos CSS que van a ser utilizados en el resto del libro. 

Aplicar estilos a los elementos HTML cambia la forma en que estos son presentados en pantalla. Como explicamos 
anteriormente, los navegadores proveen estilos pordefecto que en la mayorla de los casos no son suficientes para satisfacer 
las necesidades de los diseńadores. Para cambiar esto, podemos sobrescribir estos estilos eon los nuestros usando 
diferentes tecnicas. 

Conceptos basicos: En este libro encontrara solo una introducción breve a los estilos CSS. Solo mencionamos las 
tecnicas y propiedades que necesita conocer para entender los temas y códigos estudiados en próximos capitulos. Si 
considera que no tiene la suficiente experiencia en CSS y necesita mayor información visite nuestro sitio web y siga los 
enlaces correspondientes a este capitulo. 

Hagalo usted mismo: Dentro de un archivo de texto vacfo, copie cada código HTML estudiado en los siguientes listados 
y abra el archivo en su navegador para comprobar su funcionamiento. Tenga en cuenta que el archivo debe tener la 
extensión .html para serabierto yprocesado correctamente. 


Estilos en linea 


Una de las tecnicas mas simples para incorporar estilos CSS a un documento HTML es la de asignar los estilos dentro de 
las etiquetas por medio del atributo style. 

El Listado 2-1 muestra un documento HTML simple que contiene el elemento <p> modificado por el atributo style eon el 
valor font-size : 20px. Este estilo cambia el tamańo por defecto del texto dentro del elemento <p> a un nuevo tamańo de 20 
pixeles. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este es el titulo del documento</title> 
</head> 

<body> 

<P style="font-size: 20px">Mi texto</p> 

</body> 

</html> 


Listado 2-1. Estilos CSS dentro de etiquetas HTML. 

Usar la tecnica demostrada anteriormente es una buena manera de probar estilos y obtener una vista rapida de sus 
efectos, pero no es recomendado para aplicar estilos a todo el documento. La razón es simple: cuando usamos esta tecnica, 
debemos escribir y repetir cada estilo en cada uno de los elementos que queremos modificar, inerementando el tamańo del 
documento a proporciones inaceptables y haciendolo imposible de mantener y actualizar. Solo imagine lo que ocurriria si 
decide que en lugar de 20 pixeles el tamańo de cada uno de los elementos <p> deberla ser de 24 pixeles. Tendrfa que 
modificar cada estilo en cada etigueta <p> en el documento completo. 


Estilos embebidos 


Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar referencias para afectar los 
elementos HTML correspondientes: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 

<style> 

p { font-size: 20px } 

</style> 



</head> 

<body> 

<p>Mi texto</p> 
</body> 

</html> 


Listado 2-2. Estilos listados en la cabecera del documento. 

El elemento <style> (mostrado en el Listado 2-2) permite a los desarrolladores agrupar estilos CSS dentro del 
documento. En versiones previas de HTML era necesario especificar que tipo de estilos serlan insertados. En HTML5 los 
estilos por defecto son CSS, por lo tanto no necesitamos agregar ningun atributo en la etiqueta de apertura <style>. 

El código resaltado del Listado 2-2 tiene la misma función que la Ifnea de código del Listado 2-1, pero en el Listado 2-2 no 
tuvimos que escribir el estilo dentro de cada etiqueta<p> porque todos los elementos <p> ya fueron afectados. Con este 
metodo, reducimos nuestro código yasignamos los estilos que queremos a elementos espedficos utilizando referencias. 
Veremos mas sobre referencias en este capitulo. 


Archivos externos 


Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al código mas consistente y actualizable, pero nos 
requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro sitio web. La solución es mover todos 
los estilos a un archivo externo y luego utilizar el elemento <link> para insertar este archivo dentro de cada documento que 
los necesite. Este metodo nos permite cambiar los estilos por completo simplemente incluyendo un archivo diferente. 
Tambien nos permite modificar o adaptar nuestros documentos a cada circunstancia o dispositivo, como veremos al finał del 
libro. 

En el Capitulo 1, estudiamos la etiqueta <link> y como utilizarla para insertar archivos con estilos CSS en nuestros 
documentos. Utilizando la llnea<link rel="stylesheet" href="misestilos.css"> le decimos al navegador que 
cargue el archivo misestilos.css porque contiene todos los estilos necesitados para presentarel documento en pantalla. 
Esta practica fue ampliamente adoptada por diseńadores que ya estan trabajando con HTML5. La etiqueta <link> 
referenciando el archivo CSS sera insertada en cada uno de los documentos que reguieren de esos estilos: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Este texto es el tltulo del documento</title> 

<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<p>Mi texto</p> 

</body> 

</html> 


Listado 2-3. Aplicando estilos CSS desde un archivo externo. 

Hagalo usted mismo: De ahora en adelante agregaremos estilos CSS al archivo llamado misestilos. css. Debe crear 
este archivo en el mismo directorio (carpeta) donde se encuentra el archivo HTML y copiar los estilos CSS en su interior 
para comprobar como trabajan. 

Conceptos basicos:Los archivos CSS son archivos de texto comunes.AI igual que los archivos HTML, puede crearlos 
utilizando cualguier editor de texto como el Bloc de Notas de Windows, por ejemplo. 


Referencias 


Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro de cada documento que lo necesite es 
muy conveniente, sin embargo no podremos hacerlo sin buenos mecanismos que nos ayuden a establecer una especifica 
relación entre estos estilos ylos elementos del documento que van a ser afectados. 

Cuando hablabamos sobre como incluir estilos en el documento, mostramos una de las tecnicas utilizadas a menudo en 
CSS para referenciar elementos HTML. En el Listado 2-2, el estilo para cambiar el tamańo de la letra referenciaba cada 
elemento <p> usando la palabra clavep. De esta manera el estilo insertado entre las etiquetas <style> referenciaba cada 
etigueta <p> del documento y asignaba ese estilo particular a cada una de ellas. 







Existen varios metodos para seleccionar cuales elementos HTML seran afectados por las reglas CSS: 

• referenda por la palabra clave del elemento 

• referenda por el atributo id 

• referenda por el atributo class 

Mas tarde veremos que CSS3 es bastante flexible a este respedo e incorpora nuevas y mas especificas tecnicas para 
referenciar elementos, pero por ahora aplicaremos solo estas tres. 

Referenciando eon palabra clave 


Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada elemento de la misma clase en el 
documento. Por ejemplo, la siguiente regla cambiara los estilos de todos los elementos <p>: 


p { font-size: 20px } 


Listado 2-4. Referenciando por palabra clave. 

Esta es la tecnica presentada previamente en el Listado 2-2. Utilizando la palabra clave p al frente de la regla le estamos 
diciendo al navegador que esta regla debe ser aplicada a cada elemento <p> encontrado en el documento HTML. Todos los 
textos envueltos en etiquetas <p>tendran el tamańo de 20 pixeles. 

Por supuesto, lo mismo funcionara para cualquier otro elemento HTML. Si especificamos la palabra clave span en lugar 
de p, por ejemplo, cada texto entre etiguetas <span> tendra un tamańo de 20 pixeles: 


span { font-size: 20px } 


Listado 2-5. Referenciando por otrą palabra clave. 

ć,Pero que ocurre si solo necesitamos referenciar una etiqueta especifica? i,Debemos usar nuevamente el atributo style 
dentro de esta etiqueta? La respuesta es no. Como aprendimos anteriormente, el metodo de Estilos en Linea (usando el 
atributo style dentro de etiquetas HTML) es una tecnica en desuso y deberia ser evitada. Para seleccionar un elemento 
HTML especifico desde las reglas de nuestro archivo CSS, podemos usardos atributos diferentes: idyclass. 


Referenciando eon el atributo id 

El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo no puede ser 
duplicado. Este nombre debe ser unico en todo el documento. 

Para referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarada 
eon el simbolo # al frente del valor que usamos para identificar el elemento: 


#textol { font-size: 20px } 


Listado 2-6. Referenciando a traves del valordel atributo id. 

La regla en el Listado 2-6 sera aplicada al elemento HTML identificado eon el atributo id="textol". Ahora nuestro código 
HTML lucira de esta manera: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 







<body> 

<p id="textol">Mi texto</p> 
</body> 

</html> 


Listado 2-7. Identificando el elemento <p> a traves de su atributo id. 

El resultado de este procedimiento es que cada vez que hacemos una referenda usando el identificador textol en 
nuestro archivo CSS, el elemento eon ese valor de id sera modificado, pero el resto de los elementos <p>, o cualquier otro 
elemento en el mismo documento, no seran afectados. 

Esta es una forma extremadamente especifica de referenciar un elemento y es normalmente utilizada para elementos 
mas generales, como etiquetas estructurales. El atributo idy su especificidad es de hecho mas apropiado para referencias 
en Javascript, como veremos en próximos capitulos. 


Referenciando eon el atributo class 


La mayorfa del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar class. Este atributo es 
mas flexible ypuede serasignado a cada elemento HTML en el documento que comparte un diseńo similar: 


.textol { font-size: 20px } 


Listado 2-8. Referenciando porel valordel atributo class. 

Para trabajar eon el atributo class, debemos declarar la regla CSS eon un punto antes del nombre. La ventaja de este 
metodo es que insertar el atributo class eon el valor textol sera suficiente para asignar estos estilos a cualquier elemento 
que gueramos: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<p class="textol">Mi texto</p> 

<p class="textol">Mi texto</p> 

<p>Mi texto</p> 

</body> 

</html> 


Listado 2-9. Asignando estilos a varios elementos a traves del atributo class. 

Los elementos <p>en las primeras dos llneas dentro del cuerpo del código en el Listado 2-9 tienen el atributo class eon 
el valortextol. Como dijimos previamente, la misma regla puede ser aplicada a diferentes elementos en el mismo 
documento. Por lo tanto, estos dos primeros elementos comparten la misma regla yambos seran afectados porel estilo del 
Listado 2-8. El ultimo elemento <p> conserva los estilos por defecto otorgados por el navegador. 

La razón por la que debemos utilizar un punto delante del nombre de la regla es que es posible construir referencias mas 
complejas. Por ejemplo, se puede utilizar el mismo valor para el atributo class en diferentes elementos pero asignar 
diferentes estilos para cada tipo: 


p.textol { font-size: 20px } 

Listado 2-10. Referenciando solo elementos <p> a traves del valordel atributo class. 

En el Listado 2-10 creamos una regla que referenda la clase llamada textol pero solo para los elementos de tipo<p>. 
Si cualguier otro elemento tiene el mismo valor en su atributo class no sera modificado por esta regla en particular. 










Referenciando eon cualquier atributo 


Aunque los metodos de referenda estudiados anteriormente cubren un variado espectro de situaciones, a veces no son 
suficientes para encontrar el elemento exacto. La ultima versión de CSS ha incorporado nuevas formas de referenciar 
elementos HTML. Uno de ellas es el Selector de Atributo. Ahora podemos referenciar un elemento no solo por los atributos 
idyclass sino tambien a traves de cualquier otro atributo: 


p[name] { font-size: 20px } 

Listado 2-11. Referenciando solo elementos <p> que tienen el atributo name. 

La regla en el Listado 2-11 cambia solo elementos <p> que tienen un atributo llamado name. Para imitar lo que hicimos 
previamente eon los atributos idyclass, podemos tambien especificarel valordel atributo: 


p[name="mitexto"] { font-size: 20px } 


Listado 2-12. Referenciando elementos <p> que tienen un atributo name eon el valor mitexto. 
CSS3 permite combinar “=” eon otros para hacer una selección mas especifica: 


p[name A ="mi"] { font-size: 20px } 
p[name$="mi"] { font-size: 20px } 
p[name*="mi"] { font-size: 20px } 


Listado 2-13. Nuevos selectores en CSS3. 

Si usted conoce Expresiones Regulares desde otros lenguajes como Javascript o PHP, podrą reconocer los selectores 
utilizados en el Listado 2-13. En CSS3 estos selectores producen similares resultados: 

• La regla eon el selector A = sera asignada a todo elemento <p> que contiene un atributo name eon un valor 
comenzado en “mi” (porejemplo, “mitexto”, “micasa”). 

• La regla eon el selector $= sera asignada a todo elemento <p> que contiene un atributo name eon un valor 
finalizado en “mi” (porejemplo “textomi”, “casami”). 

• La regla eon el selector *= sera asignada a todo elemento <p> que contiene un atributo name eon un valor que 
incluye el texto “mi” (en este caso, el texto podria tambien encontrarse en el medio, como en “textomicasa”). 

En estos ejemplos usamos el elemento <p>, el atributo name, y una cadena de texto al azar como “mi”, pero la misma 
tecnica puede ser utilizada eon cualquier atributo y valor que necesitemos. Solo tiene que escribir los corchetes e insertar 
entre ellos el nombre del atributo yel valorque necesita para referenciar el elemento HTML correcto. 


Referenciando eon pseudo clases 


CSS3 tambien incorpora nuevas pseudo clases que hacen la selección aun mas especifica. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<div id="wrapper"> 

<p class="mitextol">Mi textol</p> 

<p class="mitexto2">Mi texto2</p> 

<p class="mitexto3">Mi texto3</p> 

<p class="mitexto4">Mi texto4</p> 

</div> 






</body> 

</html> 


Listado 2-14. Plantilla para probarpseudo clases. 

Miremos por un momento el nuevo código HTML del Listado 2-14. Contiene cuatro elementos <p> que, considerando la 
estructura HTML, son hermanos entre si e hijos del mismo elemento <div>. 

Usando pseudo clases podemos aprovechar esta organización y referenciar un elemento especlfico sin importar cuanto 
conocemos sobre sus atributos yel valor de los mismos: 


p:nth-child(2){ 

background: #999999; 

} 


Listado 2-15. Pseudo clase nth-child(). 

La pseudo clase es agregada usando dos puntos luego de la referencia yantes del su nombre. En la regla del Listado 2- 
15 referenciamos solo elementos <p>. Esta regla puede incluir otras referencias. Por ejemplo, podrlamos escribirla como 
.miclase:nth-child(2) para referenciar todo elemento que es hijo de otro elemento y tiene el valor de su atributo class 
igual a miclase. La pseudo clase puede seraplicada a cualquiertipo de referencia estudiada previamente. 

La pseudo clase nth-child () nos permite encontrar un hijo especlfico. Como ya explicamos, el documento HTML del 
Listado 2-14 tiene cuatro elementos <p> que son hermanos. Esto significa que todos ellos tienen el mismo padre que es el 
elemento <div>. Lo que esta pseudo clase esta realmente indicando es algo como: “el hijo en la posición...” por lo que el 
numero entre parentesis sera el numero de la posición del hijo, o fndice. La regla del Listado 2-15 esta referenciando cada 
segundo elemento <p> encontrado en el documento. 

Hagalo usted mismo: Reemplace el código en su archivo HTML por el del Listado 2-14 y abra el archivo en su 
navegador. Incorpore las reglas estudiadas en el Listado 2-15 dentro del archivo misestilos.css para comprobar su 
funcionamiento. 

Usando este metodo de referencia podemos, por supuesto, seleccionar cualquier hijo que necesitemos cambiando el 
numero de indice. Por ejemplo, la siguiente regla tendra impacto solo sobre el ultimo elemento <p> de nuestra plantilla: 


p:nth-child(4){ 

background: #999999; 

} 


Listado 2-16. Pseudo clase nth-child(). 

Como seguramente se habra dado cuenta, es posible asignar estilos a todos los elementos creando una regla para cada 
uno de ellos: 


*{ 

margin: Opx; 

} 

p:nth-child(1) { 

background: #999999; 

} 

p:nth-child(2){ 

background: #CCCCCC; 

} 

p:nth-child(3){ 

background: #999999; 

} 

p:nth-child(4){ 

background: łCCCCCC; 

} 


Listado 2-17. Creando una lista eon la pseudo clase nth-child(). 








La primera regla del Listado 2-17 usa el selector universal * para asignar el mismo estilo a cada elemento del 
documento. Este nuevo selector representa cada uno de los elementos en el cuerpo del documento y es util cuando 
necesitamos establecer ciertas reglas basicas. En este caso, configuramos el margen de todos los elementos en 0 pixeles 
para evitar espacios en blanco o lineas vacias como las creadas por el elemento <p> por defecto. 

En el resto del código del Listado 2-17 usamos la pseudo clase nth-child() para generar un menu o lista de opciones 
que son diferenciadas claramente en la pantalla por 


Hagalo usted mismo: Copie el ultimo código dentro del archivo CSS y abra el documento HTML en su navegador para 
comprobarel efecto. 

Para agregar mas opciones al menu, podemos incorporar nuevos elementos <p> en el código HTML y nuevas reglas eon 
la pseudo clase nth-child() usando el numero de indice adecuado. Sin embargo, esta aproximación genera mucho código 
y resulta imposible de aplicar en sitios webs eon contenido dinamico. Una alternativa para obtener el mismo resultado es 
aprovechar las palabras clave odd y even disponibles para esta pseudo clase: 


*{ 

margin: Opx; 

} 

p:nth-child (odd) { 

background: #999999; 

} 

p:nth-child (even){ 
background: łCCCCCC; 

} 


Listado 2-18. Aprovechando las palabras clave odd y even. 

Ahora solo necesitamos dos reglas para crear la lista completa. Incluso si mas adelante agregamos otras opciones, los 
estilos seran asignados automaticamente a cada una de ellas de aeuerdo a su posición. La palabra cl a ve odd para la 
pseudo clase nth-child () afecta los elementos <p> que son hijos de otro elemento ytienen un indice impar. La palabra 
clave even, porotro lado, afecta a aquellos que tienen un indice par. 

Existen otras importantes pseudo clases relacionadas eon esta ultima, como first-child, last-child yonly-child, 
algunas de ellas recientemente incorporadas. La pseudo clase first-child referenda solo el primer hijo, last-child 
referenda solo el ultimo hijo, yonly-child afecta un elemento siempre y cuando sea el unico hijo disponible. Estas pseudo 
clases en particular no reguieren palabras clave o parametros, y son implementadas como en el siguiente ejemplo: 


*{ 

margin: Opx; 

} 

p:last-child{ 

background: #999999; 

} 


Listado 2-19. Usando last-child para modificar solo el ultimo elemento <p> de la lista. 
Otrą importante pseudo clase llamada not() es utilizada realizar una negación: 


:not (p) { 

margin: Opx; 

} 


Listado 2-20. Aplicando estilos a cada elemento, excepto <p>. 

La regla del Listado 2-20 asignara un margen de 0 pixeles a cada elemento del documento excepto los elementos <p>. A 
diferencia del selector universal utilizado previamente, la pseudo clase not() nos permite declarar una excepción. Los estilos 
en la regla creada eon esta pseudo clase seran asignados a todo elemento excepto aquellos incluidos en la referenda entre 
parentesis. En lugar de la palabra clave de un elemento podemos usar cualquier otrą referenda que deseemos. En el 
próximo listado, por ejemplo, todos los elementos seran afectados excepto aguellos eon el valormitexto2 en el atributo 



class: 


:not(.mitexto2) { 
margin: Opx; 

} 


Listado 2-21. Excepción utilizando el atributo class. 

Cuando aplicamos la ultima regla al código HTML del Listado 2-14 el navegador asigna los estilos por defecto al 
elemento <p> identificado eon el atributo class yel valormitexto2 y provee un margen de 0 pixeles al resto. 


Nuevos selectores 


Hayalgunos selectores mas que fueron agregados o que ahora son considerados parte de CSS3 y pueden ser utiles para 
nuestros diseńos. Estos selectores usan los simbolos >, + y ~ para especificar la relación entre elementos. 


div > p.mitexto2{ 
color: #990000; 

} 


Listado 2-22. Selector >. 

El selector > esta indicando que el elemento a ser afectado por la regla es el elemento de la derecha cuando tiene al de la 
izquierda como su padre. La regla en el Listado 2-22 modifica los elementos <p> que son hijos de un elemento <div>. En 
este caso, fuimos bien especificos y referenciamos solamente el elemento <p>con el valormitexto2 en su atributo class. 

El próximo ejemplo construye un selector utilizando el simbolo+. Este selector referenda al elemento de la derecha 
cuando es inmediatamente precedido por el de la izguierda. Ambos elementos deben compartir el mismo padre: 


p.mitexto2 + p{ 
color: #990000; 

} 


Listado 2-23. Selector +. 

La regla del Listado 2-23 afecta al elemento <p> que se eneuentra ubicado luego de otro elemento <p> identificado eon el 
valormitexto2 en su atributo class. Si abre en su navegador el archivo HTML eon el código del Listado 2-14, el texto en el 
tercer elemento <p> aparecera en la pantalla en color rojo debido a que este elemento <p> en particular esta posicionado 
inmediatamente despues del elemento <p> identificado eon el valormitexto2 en su atributo class. 

El ultimo selector que estudiaremos es el construido eon el simbolo~. Este selector es similar al anterior pero el 
elemento afectado no necesita estar precediendo de inmediato al elemento de la izquierda. Ademas, mas de un elemento 
puede ser afectado: 


p.mitexto2 ~ p{ 
color: #990000; 

} 


Listado 2-24. Selector-. 

La regla del Listado 2-24 afecta al tercer y cuarto elemento <p> de nuestra plantilla de ejemplo. El estilo sera aplicado a 
todos los elementos <p>que son hermanos yse eneuentran luego del elemento <p> identificado eon el valormitexto2 en 
su atributo class. No importa si otros elementos se eneuentran intercalados, los elementos <p> en la tercera y cuarta 
posición aun seran afectados. Puede verificar esto ultimo insertando un elemento <span>mitexto</span> luego del 
elemento <p> que tiene el valormitexto2 en su atributo class. Apesar de este cambio solo los elementos <p> seran 
modificados por esta regla. 



2.4 Aplicando CSS a nuestra plantilla 


Como aprendimos mas temprano en este mismo capitulo, todo elemento estructural es considerado una caja y la estructura 
completa es presentada como un grupo de cajas. Las cajas agrupadas constituyen lo que es llamado un Modelo de Caja. 

Siguiendo eon los conceptos basicos de CSS, vamos a estudiar lo que es llamado el Modelo de Caja Tradicional. Este 
modelo has sido implementado desde la primera versión de CSS y es actualmente soportado por cada navegador en el 
mercado, lo que lo ha convertido en un estandar para el diseńo web. 

Todo modelo, incluso aquellos aun en fasę experimental, pueden ser aplicados a la misma estructura HTML, pero esta 
estructura debe ser preparada para ser afectada por estos estilos de forma adecuada. Nuestros documentos HTML deberan 
seradaptados al modelo de caja seleccionado. 

IMPORTANTE: El Modelo de Caja Tradicional presentado posteriormente no es una incorporación de HTML5, pero es 
introducido en este libro por ser el unico disponible en estos momentos y posiblemente el que continuara siendo 
utilizado en sitios webs desarrollados en HTML5 durante los próximos ańos. Si usted ya conoce como implementarlo, 
sientase en libertad de obviaresta parte del capitulo. 



2.5 Modelo de caja tradicional 


Todo comenzó eon tablas. Las tablas fueron los elementos que sin intención se volvieron la herramienta ideał utilizada por 
desarrolladores para crear y organizar cajas de contenido en la pantalla. Este puede ser considerado el primer modelo de 
caja de la web. Las cajas eran creadas expandiendo celdas ycombinando filas de celdas, columnas de celdas y tablas 
enteras, unas sobre otras o incluso anidadas. Cuando los sitios webs crecieron yse volvieron mas ymas complejos esta 
practica comenzó a presentar serios problemas relacionados eon el tamańo y el mantenimiento del código necesario para 
crearlos. 

Estos problemas iniciales hicieron necesario lo que ahora vemos como una practica natural: la división entre estructura y 
presentación. Usando etiquetas <div> y estilos CSS fue posible reemplazar la función de tablas y efectivamente separar la 
estructura HTML de la presentación. Con elementos <div>yCSS podemos crear cajas en la pantalla, posicionar estas cajas 
a un lado o a otro y darłeś un tamańo, color o borde especifico entre otras caracterlsticas. CSS provee propiedades 
especificas que nos permiten organizar las cajas acorde a nuestros deseos. Estas propiedades son lo suficientemente 
poderosas como para crear un modelo de caja que se transformó en lo que hoy conocemos como Modelo de Caja 
Tradicional. 

Algunas deficiencias en este modelo mantuvieron a las tablas vivas por algun tiempo, pero los principales 
desarrolladores, influenciados por el suceso de las implementaciones Ajax y una cantidad enorme de nuevas aplicaciones 
interactivas, gradualmente volvieron a las etiquetas <div> y estilos CSS en un estandar. Finalmente el Modelo de Caja 
Tradicional fue adoptado a gran escala. 


Plantilla 


En el Capltulo 1 construimos una plantilla HTML5. Esta plantilla tiene todos los elementos necesarios para proveer estructura 
a nuestro documento, pero algunos detalles deben ser agregados para aplicar los estilos CSS y el Modelo de Caja 
Tradicional. 

Este modelo necesita agrupar cajas juntas para ordenarlas horizontalmente. Debido a que el contenido completo del 
cuerpo es creado a partir de cajas, debemos agregar un elemento <div> para agruparlas, centrarlas y darłeś un tamańo 
especifico. 

La nueva plantilla lucira de este modo: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
Cmeta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
clink rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<div id="agrupar"> 

<header id="cabecera"> 

<hl>Este es el titulo principal del sitio web</hl> 
</header> 

<nav id="menu"> 

<ul> 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section id="seccion"> 

<article> 

<header> 

<hgroup> 

<hl>Titulo del mensaje uno</hl> 

<h2>Subtitulo del mensaje uno</h2> 

</hgroup> 



<time datetime="2011-12-10" pubdate>publicado 10-12-2011 
</time> 

</header> 

Este es el texto de mi primer mensaje 
<figure> 

<img src="http://minkbooks.com/content/myimage.jpg"> 

<figcaption> 

Esta es la imagen del primer mensaje 
</figcaption> 

</figure> 

<footer> 

<p>comentarios (0)</p> 

</footer> 

</article> 

<article> 

<header> 

<hgroup> 

<hl>Titulo del mensaje dos</hl> 

<h2>Subtitulo del mensaje dos</h2> 

</hgroup> 

<time datetime="2011-12-15" pubdate>publicado 15-12-2011 
</time> 

</header> 

Este es el texto de mi segundo mensaje 
<footer> 

<p>comentarios (0)</p> 

</footer> 

</article> 

</section> 

<aside id="columna"> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 

</aside> 

<footer id="pie"> 

Derechos Reservados Scopy; 2010-2011 
</footer> 

</div> 

</body> 

</html> 


Listado 2-25. Nueva plantilla HTML5 lista para estilos CSS. 

El Listado 2-25 provee una nueva plantilla lista para recibir los estilos CSS. Dos cambios importantes pueden distinguirse 
al comparareste código eon el del Listado 1-18 del Capftulo 1. El primero es que ahora varias etiquetas fueron identificadas 
eon los atributos id yelass. Esto significa que podemos referenciar un elemento especifico desde las reglas CSS eon el 
valor de su atributo id o podemos modificar varios elementos al mismo tiempo usando el valor de su atributo class. 

El segundo cambio realizado a la vieja plantilla es la adición del elemento <div> mencionado anteriormente. Este <div> 
fue identificado eon el atributo y el valor id="agrupar", y es cerrado al finał del cuerpo eon la etiqueta de cierre </div>. Este 
elemento se encarga de agrupartodos los demas elementos permitiendonos aplicarel modelo de caja al cuerpo ydesignar 
su posición horizontal, como veremos mas adelante. 

Hagalo usted mismo: Compare el código del Listado 1-18 del Capitulo 1 eon el código en el Listado 2-25 de este 
capitulo y ubique las etiquetas de apertura y cierre del elemento <div> utilizado para agrupar al resto. Tambien 
compruebe cuales elementos se eneuentran ahora identificados eon el atributo id y cuales eon el atributo class. 
Confirme que los valores de los atributos id son unicos para cada etiqueta. Tambien necesitara reemplazarel código 
en el archivo HTML creado anteriormente porel del Listado 2-25 para aplicarlos siguientes estilos CSS. 

Con el documento HTML finalizado es tiempo de trabajar en nuestro archivo de estilos. 


Selector universal * 


Comencemos con algunas reglas basicas que nos ayudaran a proveer consistencia al diseno: 




} 


margin: Opx; 
padding: Opx; 


Listado 2-26. Regla CSS generał. 

Normalmente, para la mayoria de los elementos, necesitamos personalizar los margenes o simplemente mantenerlos al 
minimo. Algunos elementos pordefecto tienen margenes que son diferentes de cero yen la mayoria de los casos demasiado 
amplios. A medida que avanzamos en la creación de nuestro diseńo encontraremos que la mayoria de los elementos 
utilizados deben tener un margen de 0 pixeles. Para evitar el tener que repetir estilos constantemente, podemos utilizar el 
selector universal. 

La primera regla en nuestro archivo CSS, presentada en el Listado 2-26, nos asegura que todo elemento tendra un 
margen interno y externo de 0 pixeles. De ahora en mas solo necesitaremos modificar los margenes de los elementos que 
queremos que sean mayores que cero. 

Conceptos basicos: Recuerde que en HTML cada elemento es considerado como una caja. El margen (margin) es en 
realidad el espacio alrededordel elemento, el que se encuentra porfuera del borde de esa caja (el estilo padding, por 
otro lado, es el espacio alrededor del contenido del elemento pero dentro de sus bordes, como el espacio entre el titulo 
y el borde de la caja virtual formada por el elemento <hl> que contiene ese titulo). El tamańo del margen puede ser 
definido por lados especlficos del elemento o todos sus lados a la vez. El estilo margin: Opx en nuestro ejemplo 
establece un margen 0 o nulo para cada elemento de la caja. Si el tamańo hubiese sido especificado en 5 pixeles, por 
ejemplo, la caja tendrla un espacio de 5 pixeles de ancho en todo su contorno. Esto significa que la caja estarla 
separada de sus vecinas por 5 pixeles. Volveremos sobre este tema mas adelante en este capltulo. 

Hagalo usted mismo: Debemos escribirtodas las reglas necesarias para otorgar estilo a nuestra plantilla en un archivo 
CSS. El archivo ya fue incluido dentro del código HTML por medio de la etiqueta <link>, por lo que lo unico que 
tenemos que hacer es crear un archivo de texto vaclo eon nuestro editor de textos preferido, grabarlo eon el nombre 
misestilos. css yluego copiaren su interior la regla del Listado 2-26 ytodas las presentadas a continuación. 


Nueva jerarquia para cabeceras 


En nuestra plantilla usamos elementos <hl>y<h2> para declarar tltulos ysubtitulos de diferentes secciones del documento. 
Los estilos por defecto de estos elementos se eneuentran siempre muy lejos de lo que queremos y ademas en HTML5 
podemos reconstruir la jerarqula H varias veces en cada sección (como aprendimos en el capltulo anterior). El elemento 
<hl>, por ejemplo, sera usado varias veces en el documento, no solo para el titulo principal de la pagina web como pasaba 
anteriormente sino tambien para secciones internas, por lo que tenemos que otorgarle los estilos apropiados: 


hl { 

font: bold 20px verdana, sans-serif; 

} 

h2 { 

font: bold 14px verdana, sans-serif; 

} 


Listado 2-27. Agregando estilos para los elementos <h1> y <h2>. 

La propiedad font, asignada a los elementos <hl> y<h2> en el Listado 2-27, nos permite declarar todos los estilos para 
el texto en una sola llnea. Las propiedades que pueden ser declaradas usando font son: font-style, font-variant, 
font-weight, font-size/line-height, yfont-family en este orden. Con estas reglas estamos cambiando el grosor, 
tamańo ytipo de letra del texto dentro de los elementos <hl> y<h2> a los valores que deseamos. 


Declarando nuevos elementos HTML5 


Otrą regla basica que debemos declarar desde el comienzo es la definición por defecto de elementos estructurales de 
HTML5. Algunos navegadores aun no reconocen estos elementos o los tratan como elementos inline (en llnea). Necesitamos 
declarar los nuevos elementos HTML5 como elementos błock para asegurarnos de que seran tratados como regularmente 
se hace con elementos <div> y de este modo construir nuestro modelo de caja: 





header, section, footer, aside, nav, article, figurę, figcaption, 
hgroup{ 

display: błock; 

} 


Listado 2-28. Regla por defecto para elementos estructurales de HTML5. 

Apartir de ahora, los elementos afectados por la regla del Listado 2-28 seran posicionados uno sobre otro a menos que 
especifiguemos algo diferente mas adelante. 


Centrando el cuerpo 


El primer elemento que es parte del modelo de caja es siempre <body>. Normalmente, por diferentes razones de diseńo, el 
contenido de este elemento debe ser posicionado horizontalmente. Siempre deberemos especificar el tamańo de este 
contenido, o un tamańo maximo, para obtener un diseńo consistente a traves de diferentes configuraciones de pantalla. 


body { 

text-align: center; 

} 


Listado 2-29. Centrando el cuerpo. 

Por defecto, la etiqueta <body> (como cualquier otro elemento błock) tiene un valor de ancho establecido en 100%. Esto 
significa que el cuerpo ocupara el ancho completo de la ventana del navegador. Por lo tanto, para centrar la pagina en la 
pantalla necesitamos centrar el contenido dentro del cuerpo. Con la regla agregada en el Listado 2-29, todo lo que se 
encuentra dentro de <body> sera centrado en la ventana, centrando de este modo toda la pagina web. 


Creando la caja principal 


Siguiendo con el diseńo de nuestra plantilla, debemos especificar una tamańo o tamańo maximo para el contenido del 
cuerpo. Como seguramente recuerda, en el Listado 2-25 en este mismo capitulo agregamos un elemento <div> a la plantilla 
para agrupartodas las cajas dentro del cuerpo. Este <div>sera considerado la caja principal para la construcción de nuestro 
modelo de caja (este es el propósito por el que lo agregamos). De este modo, modificando el tamańo de este elemento lo 
hacemos al mismo tiempo para todos los demas: 


#agrupar { 

width: 960px; 
margin: 15px auto; 
text-align: left; 


Listado 2-30. Definiendo las propiedades de la caja principal. 

La regla en el Listado 2-30 esta referenciando por primera vez un elemento a traves del valor de su atributo id. El caracter 
# le esta diciendo al navegador que el elemento afectado por este conjunto de estilos tiene el atributo id con el valor 
agrupar. 

Esta regla provee tres estilos para la caja principal. El primer estilo establece un valorfijo de 960 pixeles. Esta caja tendra 
siempre un ancho de 960 pixeles, lo que representa un valor comun para un sitio web estos dlas (los valores se encuentran 
entre 960 y 980 pixeles de ancho, sin embargo estos parametros cambian constantemente a traves del tiempo, por 
supuesto). 

El segundo estilo es parte de lo que llamamos el Modelo de Caja Tradicional. En la regla previa (Listado 2-29), 
especificamos que el contenido del cuerpo seria centrado horizontalmente con el estilo text-align: center. Pero esto 
solo afecta contenido inline, como textos o imagenes. Para elementos błock, como un <div>, necesitamos establecer un 
valor especifico para sus margenes que los adapta automaticamente al tamańo de su elemento padre. La propiedad margin 
usada para este propósito puede tenercuatro valores: superior, derecho, interior, izquierdo, en este orden. Esto significa que 
el primer valor declarado en el estilo representa el margen de la parte superior del elemento, el segundo es el margen de la 
derecha, yasi sucesivamente. Sin embargo, si solo escribimos los primeros dos parametros, el resto tomara los mismos 



valores. En nuestro ejemplo estamos usando esta tecnica. 

En el Listado 2-30, el estilo margin: 15px auto asigna 15 pixeles al margen superior e interior del elemento <div> que 
esta afectando y declara como automatico el tamańo de los margenes de izquierda y derecha (los dos valores declarados 
son usados para definir los cuatro margenes). De esta manera, habremos generado un espacio de 15 pixeles en la parte 
superior e interior del cuerpoylos espacios a los laterales (margen izquierdo y derecho) seran calculados automaticamente 
de acuerdo al tamańo del cuerpo del documento yel elemento <div>, efectivamente centrando el contenido en pantalla. 

La pagina web ya esta centrada y tiene un tamańo fijo de 960 pixeles. Lo próximo que necesitamos hacer es prevenir un 
problema que ocurre en algunos navegadores. La propiedad text-align es hereditaria. Esto significa que todos los 
elementos dentro del cuerpo y su contenido seran centrados, no solo la caja principal. El estilo asignado a <body> en el 
Listado 2-29 sera asignado a cada uno de sus hijos. Debemos retornar este estilo a su valor por defecto para el resto del 
documento. El tercer y ultimo estilo incorporado en la regla del Listado 2-30 (text-align: left) logra este propósito. El 
resultado finał es que el contenido del cuerpo es centrado pero el contenido de la caja principal (el <div> identificado como 
agrupar) es alineado nuevamente hacia la izquierda, por lo tanto todo el resto del código HTML dentro de esta caja hereda 
este estilo. 

Hagalo usted mismo: Si aun no lo ha hecho, copie cada una de las reglas listadas hasta este punto dentro de un 
archivo de texto vacio llamado misestilos.css. Este archivo debe estar ubicado en el mismo directorio (carpeta) que 
el archivo HTML eon el código del Listado 2-25. Al terminar, debera contar eon dos archivos, uno eon el código HTML y 
otro llamado misestilos. css eon todos los estilos CSS estudiados desde el Listado 2-26. Abra el archivo HTML en su 
navegador y en la pantalla podrą notar la caja creada. 


La cabecera 


Continuemos eon el resto de los elementos estructurales. Siguiendo la etiqueta de apertura del <div> principal se eneuentra 
el primer elemento estructural de HTML5: <header>. Este elemento contiene el titulo principal de nuestra pagina web yestara 
ubicado en la parte superior de la pantalla. En nuestra plantilla, <header> fue identificado eon el atributoid y el valor 
cabecera. 

Como ya mencionamos, cada elemento błock , asi como el cuerpo, por defecto tiene un valor de ancho del 100%. Esto 
significa que el elemento ocupara todo el espacio horizontal disponible. En el caso del cuerpo, ese espacio es el ancho total 
de la pantalla visibIe (la ventana del navegador), pero en el resto de los elementos el espacio maximo disponible estara 
determinado por el ancho de su elemento padre. En nuestro ejemplo, el espacio maximo disponible para los elementos 
dentro de la caja principal sera de 960 pixeles, porque su padre es la caja principal la cual fue previamente configurada eon 
este tamańo. 


#cabecera { 

background: #FFFBB9; 
border: lpx solid #999999; 
padding: 20px; 


Listado 2-31. Agregando estilos para <header>. 

Debido a que<header> ocupara todo el espacio horizontal disponible en la caja principal y sera tratado como un 
elemento błock (y por esto posicionada en la parte superior de la pagina), lo unico que resta por hacer es asignar estilos que 
nos permitiran reconocer el elemento cuando es presentado en pantalla. En la regla mostrada en el Listado 2-31 le 
otorgamos a <header> un fondo amarillo, un borde sólido de 1 pixel y un margen interior de 20 pixeles usando la propiedad 
padding. 


Barra de navegación 


Siguiendo al elemento <header> se eneuentra el elemento <nav>, el cual tiene el propósito de proporcionar ayuda para la 
navegación. Los enlaces agrupados dentro de este elemento representaran el menu de nuestro sitio web. Este menu sera 
una simple barra ubicada debajo de la cabecera. Por este motivo, del mismo modo que el elemento <header>, la mayoria de 
los estilos que necesitamos para posicionar el elemento <nav> ya fueron asignados: <nav> es un elemento błock por lo que 
sera ubicado debajo del elemento previo, su ancho por defecto sera 100% por lo que sera tan ancho como su padre (el 
<div> principal), y (tambien por defecto) sera tan alto como su contenido y los margenes predeterminados. Por lo tanto, lo 
unico que nos queda por hacer es mejorar su aspecto en pantalla. Esto ultimo lo logramos agregando un fondo gris y un 
pegueńo margen interno para separar las opciones del menu del borde del elemento: 



#menu { 

background: #CCCCCC; 
padding: 5px 15px; 

} 

łmenu li { 

display: inline-block; 
list-style: nonę; 
padding: 5px; 

font: bold 14px verdana, sans-serif; 

} 


Listado 2-32. Agregando estilos para <nav>. 

En el Listado 2-32, la primera regla referenda al elemento <nav> por su atributo id, cambia su color de fondo y agrega 
margenes internos de 5px y 15px eon la propiedad padding. 

Conceptos basicos: La propiedad padding trabaja exactamente como margin. Cuatro valores pueden ser 
especificados: superior, derecho, interior, izquierdo, en este orden. Si solo declaramos un valor, el mismo sera 
asignado para todos los espacios alrededor del contenido del elemento. Si en cambio especificamos dos valores, 
entonces el primero sera asignado como margen interno de la parte superior e interior del contenido y el segundo valor 
sera asignado al margen interno de los lados, izquierdo yderecho. 

Dentro de la barra de navegación hay una lista creada eon las etiquetas <ul> y<li>. Por defecto, los items de una lista 
son posicionados unos sobre otros. Para cambiar este comportamiento y colocar cada opción del menu una al lado de la 
otrą, referenciamos los elementos <li> dentro de este elemento <nav> en particular usando el selector Imenu li, y luego 
asignamos a todos ellos el estilo display: inline-block para convertirlos en lo que se llama cajas inline. Adiferencia de 
los elementos błock , los elementos afectados por el parametro inline-block estandarizado en CSS3 no generan ningun 
salto de linea pero nos permiten tratarlos como elementos błock y asi declarar un valor de ancho determinado. Este 
parametro tambien ajusta el tamańo del elemento de aeuerdo eon su contenido cuando el valor del ancho no fue 
especificado. 

En esta ultima regla tambien eliminamos el pequeńo grafico generado por defecto por los navegadores delante de cada 
opción del listado utilizando la propiedad list-style. 


Section y aside 


Los siguientes elementos estructurales en nuestro código son dos cajas ordenadas horizontalmente. El Modelo de Caja 
Tradicional es construido sobre estilos CSS que nos permiten especificar la posición de cada caja. Usando la propiedad 
float podemos posicionar estas cajas del lado izquierdo o derecho de aeuerdo a nuestras necesidades. Los elementos 
que utilizamos en nuestra plantilla HTML para crear estas cajas son <section> y<aside>, cada uno identificado eon el 
atributo idy los valores seccion y columna respectivamente. 


tseccion { 
float: left; 
width: 660px; 
margin: 20px; 

} 

łcolumna { 
float: left; 
width: 220px; 
margin: 20px Opx; 
padding: 20px; 
background: #CCCCCC; 


Listado 2-33. Creando dos columnas eon ia propiedad float. 

La propiedad de CSS float es una de las propiedades mas ampliamente utilizadas para aplicar el Modelo de Caja 
Tradicional. Hace que el elemento flotę hacia un lado o al otro en el espacio disponible. Los elementos afectados por float 
actuan como elementos błock (eon la diferencia de que son ubicados de aeuerdo al valor de esta propiedad y no el flujo 
normal del documento). Los elementos son movidos a izguierda o derecha en el area disponible, tanto como sea posible, 





respondiendo al valorde float. 


Con las reglas del Listado 2-33 declaramos la posición de ambas cajas y sus respectivos tamańos, generando asi las 
columnas visibles en la pantalla. La propiedad float mueve la caja al espacio disponible del lado especificado por su valor, 
width asigna un tamańo horizontal ymargin, por supuesto, declara el margen del elemento. 

Afectado por estos valores, el contenido del elemento <section> estara situado a la izquierda de la pantalla con un 
tamańo de 660 pixeles, mas 40 pixeles de margen, ocupando un espacio total de 700 pixeles de ancho. 

La propiedad float del elemento <aside> tambien tiene el valorleft (izquierda). Esto significa que la caja generada 
sera movida al espacio disponible a su izquierda. Debido a que la caja previa creada por el elemento <section> fue tambien 
movida a la izquierda de la pantalla, ahora el espacio disponible sera solo el que esta caja dejó librę. La nueva caja quedara 
ubicada en la misma linea que la primera pero a su derecha, ocupando el espacio restante en la linea, creando la segunda 
columna de nuestro diseńo. 

El tamańo declarado para esta segunda caja fue de 220 pixeles. Tambien agregamos un fondo gris y configuramos un 
margen interno de 20 pixeles. Como resultado finał, el ancho de esta caja sera de 220 pixeles mas 40 pixeles agregados por 
la propiedad padding(los margenes de los lados fueron declarados a 0px). 

Conceptos basicos: El tamańo de un elemento y sus margenes son agregados para obtener el valor real ocupado en 
pantalla. Si tenemos un elemento de 200 pixeles de ancho y un margen de 10 pixeles a cada lado, el area real ocupada 
porel elemento sera de 220 pixeles. El total de 20 pixeles del margen es agregado a los 200 pixeles del elemento yel 
valor finał es representado en la pantalla. Lo mismo pasa con las propiedades padding yborder. Cada vez que 
agregamos un borde a un elemento o creamos un espacio entre el contenido y el borde usando padding esos valores 
seran agregados al ancho del elemento para obtener el valor real cuando el elemento es mostrado en pantalla. Este 
valor real es calculado con la formula: tamańo + margenes + margenes internos + bordes. 

Hagalo usted mismo: Lea el código del Listado 2-25. Controle cada regla CSS creada hasta el momento y busque en la 
plantilla los elementos HTML correspondientes a cada una de ellas. Siga las referencias, porejemplo las claves de los 
elementos (comohl) y los atributos id (como cabecera), para entender como trabajan las referencias y como los 
estilos son asignados a cada elemento. 


Footer 


Para finalizar la aplicación del Modelo de Caja Tradicional, otrą propiedad CSS tiene que ser aplicada al elemento <footer>. 
Esta propiedad devuelve al documento su flujo normal y nos permite posicionar<footer> debajo del ultimo elemento en 
lugar de a su lado: 


#pie { 

elear: both; 
text-align: center; 
padding: 20px; 

border-top: 2px solid #999999; 

} 


Listado 2-34. Otorgando estilos a <footer> y recuperando el normal flujo del documento. 

La regla del Listado 2-34 declara un borde de 2 pixeles en la parte superior de <footer>, un margen interno (padding) de 
20 pixeles, y centra el texto dentro del elemento. Asi mismo, restaura el normal flujo del documento con la propiedad elear. 
Esta propiedad simplemente restaura las condiciones normales del area ocupada por el elemento, no permitiendole 
posicionarse adyacente a una caja flotante. El valor usualmente utilizado es both, el cual significa que ambos lados del 
elemento seran restaurados yel elemento seguira el flujo normal (este elemento ya no es flotante como los anteriores). Esto, 
para un elemento błock, quiere decir que sera posicionado debajo del ultimo elemento, en una nueva linea. 

La propiedad elear tambien empuja los elementos verticalmente, haciendo que las cajas flotantes ocupen un area real 
en la pantalla. Sin esta propiedad, el navegador presenta el documento en pantalla como si los elementos flotantes no 
existieran ylas cajas se superponen. 



display: błock 

display: błock 

display: błock 

display: błock 

float: left 

float: left 

display: błock 
elear: both 


Figura 2-2. Representación visual del modelo de caja tradicional. 

Cuando tenemos cajas posicionadas una al lado de la otrą en el Modelo de Caja Tradicional siempre necesitamos crear 
un elemento eon el estilo elear: both para poder seguir agregando otras cajas debajo de un modo natural. La Figura 2-2 
muestra una representación visual de este modelo eon los estilos basicos para lograrla correcta disposición en pantalla. 

Los valores left (izquierda) yright (derecha) de la propiedad float no significan que las cajas deben estar 
necesariamente posicionadas del lado izquierdo o derecho de la ventana. Lo que los valores hacen es volverflotante ese lado 
del elemento, rompiendo el flujo normal del documento. Si el valor es left, por ejemplo, el navegador tratara de posicionar el 
elemento del lado izquierdo en el espacio disponible. Si hayespacio disponible luego de otro elemento, este nuevo elemento 
sera situado a su derecha, porque su lado izquierdo fue configurado como flotante. El elemento flota hacia la izquierda hasta 
que eneuentra algo que lo bloquea, como otro elemento o el borde de su elemento padre. Esto es importante cuando 
queremos crear varias columnas en la pantalla. En este caso cada columna tendra el valorleften la propiedad float para 
asegurar que cada columna estara continua a la otrą en el orden correcto. De este modo, cada columna flotara hacia la 
izguierda hasta que es blogueada por otrą columna o el borde del elemento padre. 


Ultimos toques 


Lo unico que nos queda por hacer es trabajar en el diseno del contenido. Para esto, solo necesitamos configurar los pocos 
elementos HTML5 restantes: 


article { 

background: #FFFBCC; 
border: lpx solid #999999; 
padding: 20px; 
margin-bottom: 15px; 

} 

article footer { 
text-align: right; 

} 

time { 

color: #999999; 

} 

figeaption { 

font: italic 14px verdana, sans-serif; 

} 


Listado 2-35. Agregando los ultimos togues a nuestro diseno basico. 




La primera regla del Listado 2-35 referenda todos los elementos <article> y les otorga algunos estilos basicos (color 
de fondo, un borde sólido de 1 pixeI, margen interno y margen inferior). El margen inferior de 15 pixeles tiene el propósito de 
separar un elemento <article> del siguiente verticalmente. 

Cada elemento <article> cuenta tambien eon un elemento <footer> que muestra el numero de comentarios 
recibidos. Para referenciar un elemento <footer> dentro de un elemento <article>, usamos el selector article footer 
que significa “cada <footer> dentro de un <article> sera afectado por los siguientes estilos”. Esta tecnica de referenda 
fue aplicada aqui para alinear a la derecha el texto dentro de los elementos <footer> de cada <article>. 

Al finał del código en el Listado 2-35 cambiamos el color de cada elemento <time> y diferenciamos la descripción de la 
imagen (insertada eon el elemento <figcaption>) del resto del texto usando una tipo de letra diferente. 

Hagalo usted mismo: Si aun no lo ha hecho, copie cada regla CSS listada en este capftulo desde el Listado 2-26, una 
debajo de otrą, dentro del archivo misestilos. css, y luego abra el archivo HTML eon la plantilla creada en el Listado 2- 
25 en su navegador. Esto le mostrara como funciona el Modelo de Caja Tradicional y como los elementos estructurales 
son organizados en pantalla. 

IMPORTANTE: Puede acceder a estos códigos eon un solo clic desde nuestro sitio web. Visite www.minkbooks.com . 


Box-sizing 


Existe una propiedad adicional incorporada en CSS3 relacionada eon la estructura y el Modelo de Caja Tradicional. La 
propiedad box-sizing nos permite cambiar como el espacio total ocupado por un elemento en pantalla sera calculado 
forzando a los navegadores a incluiren el ancho original los valores de las propiedades padding yborder. 

Como explicamos anteriormente, cada vez que el area total ocupada por un elemento es calculada, el navegador obtiene 
el valorfinal por medio de la siguiente formula: tamańo + margenes + margenes internos + bordes. 

Por este motivo, si declaramos la propiedad width igual a 100 pixeles, margin en 20 pixeles, padding en 10 pixeles y 
border en 1 pixe I , el area horizontal total ocupada por el elemento sera: 100+40+20+2= 162 pixeles (notę que tuvimos que 
duplicar los valores de margin, padding yborder en la formula porque consideramos que los mismos fueron asignados 
tanto para el lado derecho como el izquierdo). 

Esto significa que cada vezque declare el ancho de un elemento eon la propiedad width, debera recordar que el area real 
para ubicarel elemento en pantalla sera seguramente mas grandę. 

Dependiendo de sus costumbres, a veces podria resultar util forzar al navegador a incluir los valores de padding y 
border en el tamańo del elemento. En este caso la nueva formula seria simplemente: tamańo + margenes. 


div { 

width: 100px; 

margin: 20px; 

padding: 10px; 

border: lpx solid #000000; 

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 


Listado 2-36. Incluyendo padding y border en el tamańo del elemento. 

La propiedad box-sizing puede tomar dos valores. Por defecto es configurada como content-box, lo que significa que 
los navegadores agregaran los valores de padding yborder al tamańo especificado por width yheight. Usando el valor 
border-box en su lugar, este comportamiento es cambiado de modo que padding yborder son incluidos dentro del 
elemento. 

El Listado 2-36 muestra la aplicación de esta propiedad en un elemento <div>. Este es solo un ejemplo y no vamos a 
usarlo en nuestra plantilla, pero puede ser util para algunos diseńadores dependiendo de que tan familiarizados se 
eneuentran eon los metodos tradicionales propuestos porversiones previas de CSS. 

IMPORTANTE: En este momento, la propiedad box-sizing, al igual que otras importantes propiedades CSS3 
estudiadas en próximos capitulos, se eneuentra en estado experimental en algunos navegadores. Para aplicarla 
efectivamente a sus documentos, debe declararla eon los correspondientes prefijos, como hicimos en el Listado 2-36. 
Los prefijos para los navegadores mas comunes son los siguientes: 



• -moz- para Firefox. 

• -webkit- para Safari y Chrome. 

• -o- para Opera. 

• -khtml- para Konqueror. 

• -ms- para Internet Explorer. 

• -chrome- especifico para Google Chrome. 




2.6 Referenda rapida 


En HTML5 la responsabilidad por la presentación de la estructura en pantalla esta mas que nunca en manos de CSS. 
Incorporaciones y mejoras se han hecho en la ultima versión de CSS para proveer mejores formas de organizar documentos 
ytrabajarcon sus elementos. 


Selector de atributo y pseudo clases 


CSS3 incorpora nuevos mecanismos para referenciar elementos HTML. 

Selector de Atributo Ahora podemos utilizar otros atributos ademas de id yclass para encontrar elementos en el 
documento y asignar estilos. Con la construcción palabraclave [atributo=valor] , podemos referenciar un 
elemento que tiene un atributo particular con un valor especlfico. Por ejemplo, p [name="texto"] referenciara cada 
elemento<p> con un atributo llarnadoname y el valor ”texto”. CSS3 tambien provee tecnicas para hacer esta 
referenda aun mas especlfica. Usando las siguientes combinaciones de simbolos A =, $= y*= podemos encontrar 
elementos que comienzan con el valor provisto, elementos que terminan con ese valor y elementos que tienen el 
texto provisto en alguna parte del valor del atributo. Por ejemplo, p [name A ="texto"] sera usado para encontrar 
elementos <p> que tienen un atributo llamado name con un valor que comienza por ”texto”. 

Pseudo Clase :nth-child() Esta pseudo clase encuentra un hijo especifico siguiendo la estructura de arbol de HTML. Por 
ejemplo, con el estilo span:nth-child(2) estamos referenciando el elemento <span> que tiene otros elementos 
<span> como hermanos yesta localizado en la posición 2. Este numero es considerado el Indice. En lugar de un 
numero podemos usar las palabras clave odd yeven para referenciar elementos con un indice impar o par 
respectivamente (por ejemplo, span:nth-child(odd)). 

Pseudo Clase :first-child Esta pseudo clase es usada para referenciar el primer hijo, similar a :nth-child(l). 

Pseudo Clase :last-child Esta pseudo clase es usada para referenciar el ultimo hijo. 

Pseudo Clase :only-child Esta pseudo clase es usada para referenciar un elemento que es el unico hijo disponible de 
un mismo elemento padre. 

Pseudo Clase :not() Esta pseudo clase es usada para referenciar todo elemento excepto el declarado entre parentesis. 


Selectores 


CSS3 tambien incorpora nuevos selectores que ayudan a llegar a elementos dificiles de referenciar utilizando otras tecnicas. 

Selector > Este selector referenda al elemento de la derecha cuando tiene el elemento de la izquierda como padre. Por 
ejemplo, div > p referenciara cada elemento <p> que es hijo de un elemento <div>. 

Selector + Este selector referenda elementos que son hermanos. La referenda apuntara al elemento de la derecha 
cuando es inmediatamente precedido por el de la izquierda. Por ejemplo, span + p afectara a los elementos <p> 
que son hermanos yestan ubicados luego de un elemento <span>. 

Selector ~ Este selector es similar al anterior, pero en este caso el elemento de la derecha no tiene que estar ubicado 
inmediatamente despues del de la izguierda. 




Capitulo 3 
Propiedades CSS3 


3.1 Las nuevas reglas 


La web cambió para siempre cuando unos ańos atras nuevas aplicaciones desarrolladas sobre implementaciones Ajax 
mejoraron el diseńo y la experiencia de los usuarios. La versión 2.0, asignada a la web para describir un nuevo nivel de 
desarrollo, representó un cambio no solo en la forma en que la información era transmitida sino tambien en como los sitios 
web ynuevas aplicaciones eran diseńados yconstruidos. 

Los códigos implementados en esta nueva generación de sitios web pronto se volvieron estandar. La innovación se volvió 
tan importante para el exito de cualquier proyecto en Internet que programadores desarrollaron librerlas completas para 
superarlas limitaciones ysatisfacer los nuevos requerimientos de los diseńadores. 

La falta de soporte por parte de los navegadores era evidente, pero la organización responsable de los estandares web no 
tomó las tendencias muy seriamente e intentó seguir su propio camino. Afortunadamente, algunas mentes brillantes 
siguieron desarrollando nuevos estandares en paralelo y pronto HTML5 nació. Luego del retorno de la calma (y algunos 
acuerdos de por medio), la integración entre HTML, CSS y Javascript bajo la tutela de HTML5 fue como el caballero braw y 
victorioso que dirige las tropas hacia el palacio enemigo. 

Apesar de la reciente agitación, esta batalia comenzó mucho tiempo atras, eon la primera especificación de la tercera 
versión de CSS. Cuando finalmente, alrededor del ano 2005, esta tecnologla fue oficialmente considerada estandar, CSS 
estaba listo para proveer las funciones requeridas por desarrolladores (aquellas que programadores hablan creado desde 
ańos atras usando códigos Javascript complicados de implementaryno siempre compatibles). 

En este capitulo vamos a estudiar las contribuciones hechas por CSS3 a HTML5 y todas las propiedades que simplifican 
la vida de diseńadores y programadores. 


CSS3 se vuelve loco 


CSS fue siempre sobre estilo, pero ya no mas. En un intento por reducir el uso de código Javascript y para estandarizar 
funciones populares, CSS3 no solo cubre diseńo yestilos web sino tambien forma ymovimiento. La especificación de CSS3 
es presentada en módulos que permiten a la tecnologla proveer una especificación estandar por cada aspecto inwlucrado en 
la presentación visual del documento. Desde esquinas redondeadas ysombras hasta transformaciones y reposicionamiento 
de los elementos ya presentados en pantalla, cada posible efecto aplicado previamente utilizando Javascript fue cubierto. 
Este nivel de cambio convierte CSS3 en una tecnologla practicamente inedita comparada eon versiones anteriores. 

Cuando la especificación de HTML5 fue escrita considerando CSS a cargo del diseńo, la mitad de la batalia contra el resto 
de las especificaciones propuesta habla sido ganada. 


Plantilla 


Las nuevas propiedades CSS3 son extremadamente poderosas y deben ser estudiadas una por una, pero para facilitar su 
aprendizaje vamos a aplicar todas ellas sobre la misma plantilla. Por este motiw comenzaremos por crear un documento 
HTML sencillo eon algunos estilos basicos: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Nuevos Estilos CSS3</title> 
clink rel="stylesheet" href="nuevocss3.css"> 
</head> 

<body> 

<header id="principal"> 

<span id="titulo">Estilos CSS Web 2.0</span> 
</header> 

</body> 

</html> 



Listado 3-1. Una plantilla simple para prób ar nuevas propiedades. 

Nuestro documento solo tiene una sección eon un texto breve en su interior. El elemento <header> usado en la plantilla 
podria ser reemplazado por<div>, <nav>, <section> o cualquier otro elemento estructural de aeuerdo a la ubicación en el 
diseńo ya su función. Luego de aplicar los estilos, la caja generada eon el código del ejemplo del Listado 3-1 lucira como 
una cabecera, por consiguiente decidimos usar<header>en este caso. 

Debido a que el elemento <font> se eneuentra en desuso en HTML5, los elementos usados para mostrar texto son 
normalmente <span> para llneas cortas y<p> para parrafos, entre otros. Por esta razón el texto en nuestra plantilla fue 
insertado usando etiquetas <span>. 

Hagalo usted mismo: Use el código provisto en el Listado 3-1 como la plantilla para este capitulo. Necesitara ademas 
crear un nuevo archivo CSS llamado nuevocss3. css para almacenar los estilos estudiados de aqui en adelante. 

Los siguientes son los estilos basicos regueridos por nuestro documento HTML: 


body { 

text-align: center; 

} 

#principal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

} 

#titulo { 

font: bold 36px verdana, sans-serif; 

} 


Listado 3-2. Reglas basicas CSS eon las que comenzar. 

No haynada nuevo en las reglas del Listado 3-2, solo los estilos necesarios para dar forma a la plantilla y crear una caja 
ancha, posicionada en el centro de la ventana, eon un fondo gris, un borde y un texto grandę en su interior que dice “Estilos 
CSS Web 2.0”. 

Una de las cosas que notara sobre esta caja cuando sea mostrada en pantalla es que sus esquinas son rectas. Esto no 
es algo que nos agrade, i,verdad? Puede ser un factor psicológico o no, lo cierto es que a casi nadie en este negocio le 
agradan las esguinas rectas. Por lo tanto, lo primero que haremos sera cambiar este aspecto. 


Border-radius 


Por muchos ańos diseńadores han sufrido intentando lograr el efecto de esquinas redondeadas en las cajas de sus paginas 
web. El proceso era casi siempre frustrante y extenuante. Todos lo padecieron alguna vez. Si mira cualquier presentación en 
video de las nuevas caracteristicas incorporadas en HTML5, cada vezque alguien habla sobre las propiedades de CSS3 que 
hacen posible generar facilmente esquinas redondeadas, la audiencia enloquece. Esquinas redondeadas eran esa clase de 
cosas que nos hacian pensar: “deberia serfacil hacerlo”. Sin embargo nunca lo fue. 

Esta es la razón por la que, entre todas las nuevas posibilidades e increfbles propiedades incorporadas en CSS3, la que 
exploraremos en primera instancia es border-radius: 


body { 

text-align: center; 

} 

#principal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 



background: #DDDDDD; 


-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px; 

} 

#titulo { 

font: bold 36px verdana, sans-serif; 


Listado 3-3. Generando esquinas redondeadas. 

La propiedad border-radius en este momento es experimental por lo que debemos usar los prefijos -moz- y -webkit- 
para que funcionen en navegadores basados en motores Gecko y WebKit, como Firefox, Safari yGoogle Chrome (los prefijos 
fueron estudiados y aplicados en el Capltulo 2). Si todas las esquinas tienen la misma curvatura podemos utilizar un solo 
valor. Sin embargo, como ocurre eon las propiedades margin ypadding, podemos tambien declarar un valor diferente por 
cada una: 


body { 

text-align: center; 

} 

tprincipal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px 10px 30px 50px; 
-webkit-border-radius: 20px 10px 30px 50px; 
border-radius: 20px 10px 30px 50px; 

} 

#titulo { 

font: bold 36px verdana, sans-serif; 


Listado 3-4. Diferentes valores para cada esquina. 

Como puede ver en el Listado 3-4, los cuatro valores asignados a la propiedad border-radius representan diferentes 
ubicaciones. Recorriendo la caja en dirección de las agujas del reloj, los valores se aplicaran en el siguiente orden: esquina 
superior izquierda, esquina superior derecha, esquina inferior derecha y esquina interior izquierda. Los valores son siempre 
dados en dirección de las agujas del reloj, comenzando por la esquina superior izquierda. 

Al igual que eon margin o padding, border-radius puede tambien trabajar solo eon dos valores. El primer valor sera 
asignado a la primera ytercera equina (superior izquierda, inferior derecha), y el segundo valor a la segunda y cuarta esquina 
(superior derecha, inferior izquierda). 

Tambien podemos dar forma a las esquinas declarando un segundo grupo de valores separados por una barra. Los 
valores a la izquierda de la barra representaran el radio horizontal mientras que los valores a la derecha representan el radio 
yertical. La combinación de estos yalores genera una elipsis: 


body { 

text-align: center; 

} 

#principal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 



-moz-border-radius: 20px / 10px; 
-webkit-border-radius: 20px / 10px; 
border-radius: 20px / 10px; 

} 

#titulo { 

font: bold 36px verdana, sans-serif; 


Listado 3-5. Esquinas elipticas. 

Hagalo usted mismo: Copie dentro del archivo CSS llamado nuevocss3. css los estilos que quiera probar y abra el 
archivo HTML generado eon el Listado 3-1 en su navegador para comprobar los resultados. 


Box-shadow 


Ahora que finalmente contamos eon la posibilidad de generar bonitas esquinas para nuestras cajas podemos arriesgarnos 
eon algo mas. Otro muy buen efecto, que habia sido extremadamente complicado de lograr hasta este momento, es 
sombras. Por ahos disehadores han combinado imagenes, elementos y algunas propiedades CSS para generar sombras. 
Gracias a CSS3 ya la nueva propiedad box-shadow podremos aplicar sombras a nuestras cajas eon solo una simple linea 
de código: 


body { 

text-align: center; 

} 

tprincipal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px; 

-moz-box-shadow: rgb(150,150,150) 5px 5px; 
-webkit-box-shadow: rgb(150,150,150) 5px 5px; 
box-shadow: rgb (150,150,150) 5px 5px; 

} 

ttitulo { 

font: bold 36px verdana, sans-serif; 


Listado 3-6. Aplicando sombra a nuestra caja. 

La propiedad box-shadow necesita al menos tres valores. El primero, que puede ver en la regla del Listado 3-6, es el 
color. Este valor fue construido aqui utilizando la función rgb() y numeros decimales, pero podemos escribirlo en numeros 
hexadecimales tambien, como hicimos previamente para otros parametros en este libro. 

Los siguientes dos valores, expresados en pixeles, establecen el desplazamiento de la sombra. Este desplazamiento 
puede ser positivo o negativo. Los valores indican, respectivamente, la distancia horizontal y vertical desde la sombra al 
elemento. Valores negativos posicionaran la sombra a la izquierda y arriba del elemento, mientras que valores positivos 
crearan la sombra a la derecha y debajo del elemento. Valores de 0 o nulos posicionaran la sombra exactamente detras del 
elemento, permitiendo la posibilidad de crear un efecto difuminado a todo su alrededor. 

Hagalo usted mismo: Para probar los diferentes parametros y posibilidades eon los que contamos para asignar una 
sombra a una caja, copie el código del Listado 3-6 dentro del archivo CSS y abra el archivo HTML eon la plantilla del 
Listado 3-1 en su navegador. Puede experimentar cambiando los valores de la propiedad box-shadow y puede usarel 
mismo código para experimentartambien eon los nuevos parametros estudiados a continuación. 

La sombra que obtuvimos hasta el momento es solida, sin gradientes o transparencias (no realmente como una sombra 



suele aparecer). Existen algunos parametros mas y cambios que podemos implementar para mejorar la apariencia de la 
sombra. 


Un cuarto valor que se puede agregar a la propiedad ya estudiada es la distancia de difuminación. Con este efecto ahora 
la sombra lucira real. Puede intentar utilizar este nuevo parametro declarando un valorde 10 pixeles a la regla del Listado 3-6, 
como en el siguiente ejemplo: 


box-shadow: rgb(150,150,150) 5px 5px 10px; 


Listado 3-7. Agregando el valorde difuminación a box-shadow. 

Agregando otro valor mas en pixeles al finał de la propiedad desparramara la sombra. Este efecto cambia un poco la 
naturaleza de la sombra expandiendo el area que cubre. Apesar de que no recomendamos utilizar este efecto, puede ser 
aplicable en algunos diseńos. 

Hagalo usted mismo: Intente agregar un valor de 20 pixeles al finał del estilo del Listado 3-7 y combine este código con 
el código del Listado 3-6 para probarlo. 

IMPORTANTĘ: Siempre recuerde que en este momento las propiedades estudiadas son experimentales. Para usarlas, 
debe declarar cada una agregando los prefijos correspondientes, como -moz- o -webkit-, de acuerdo al navegador 
que usa (en este ejemplo, Firefoxo Google Chrome). 

El ultimo valor posible para box-shadow no es un numero sino mas bien una palabra clave: inset. Esta palabra clave 
convierte a la sombra externa en una sombra interna, lo cual provee un efecto de profundidad al elemento afectado. 


box-shadow: rgb(150,150,150) 5px 5px 10px inset; 


Listado 3-8. Sombra interna. 

El estilo en el Listado 3-8 mostrara una sombra interna alejada del borde de la caja por unos 5 pixeles ycon un efecto de 
difuminación de 10 pixeles. 

Hagalo usted mismo: Los estilos de los Listados 3-7 y 3-8 son solo ejemplos. Para comprobar los efectos en su 
navegador debe aplicarestos cambios al grupo completo de reglas presentado en el Listado 3-6. 

IMPORTANTE: Las sombras no expanden el elemento o incrementan su tamaho, por lo que tendra que controlar 
cuidadosamente que el espacio disponible es suficiente para que la sombra sea expuesta y correctamente dibujada en 
la pantalla. 


Text-shadow 


Ahora que conoce todo acerca de sombras probablemente estara pensando en generar una para cada elemento de su 
documento. La propiedad box-shadow fue disenada especialmente para ser aplicada en cajas. Si intenta aplicar este efecto 
a un elemento <span>, por ejemplo, la caja invisible ocupada por este elemento en la pantalla tendra una sombra, pero no el 
contenido del elemento. Para crear sombras para figuras irregulares como textos, existe una propiedad especial llamada 
text-shadow: 


body { 

text-align: center; 

} 

tprincipal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px; 



-moz-box-shadow: rgb (150,150,150) 5px 5px 10px; 
-webkit-box-shadow: rgb(150,150,150) 5px 5px 10px; 
box-shadow: rgb(150,150,150) 5px 5px 10px; 

} 

#titulo { 

font: bold 36px verdana, sans-serif; 

text-shadow: rgb(0,0,150) 3px 3px 5px; 


Listado 3-9. Generando una sombra para et titulo. 

Los valores para text-shadow son similares a los usados para box-shadow. Podemos declararel colorde la sombra, la 
distancia horizontal yvertical de la sombra eon respecto al objęto yel radio de difuminación. 

En el Listado 3-9 una sombra azul fue aplicada al titulo de nuestra plantilla eon una distancia de 3 pixeles yun radio de 
difuminación de 5. 


@font-face 


Obtener un texto eon sombra es realmente un muy buen truco de diseńo, imposible de lograr eon metodos previos, pero mas 
que cambiar el texto en sl mismo solo provee un efecto tridimensional. Una sombra, en este caso, es como pintar un viejo 
coche, al finał sera el mismo coche. En este caso, sera el mismo tipo de letra. 

El problema eon las fuentes o tipos de letra es tan viejo como la web. Usuarios regulares de la web a menudo tienen un 
numero limitado de fuentes instaladas en sus ordenadores, usualmente estas fuentes son diferentes de un usuario a otro, y 
la mayorfa de las veces muchos usuarios tendran fuentes que otros no. Porańos, los sitios webs solo pudieron utilizar un 
limitado grupo de fuentes confiables (un grupo basico que practicamente todos los usuarios tienen instalados) y asl 
presentarla información en pantalla. 

La propiedad @font-face permite a los diseńadores proveer un archivo conteniendo una fuente especlfica para mostrar 
sus textos en la pagina. Ahora podemos incluir cualguier fuente que necesitemos eon solo proveerel archivo adecuado: 


body { 

text-align: center; 

} 

#principal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px; 

-webkit-border-radius: 20px; 
border-radius: 20px; 

-moz-box-shadow: rgb(150,150,150) 5px 5px 10px; 
-webkit-box-shadow: rgb(150,150,150) 5px 5px 10px; 
box-shadow: rgb(150,150,150) 5px 5px 10px; 

} 

#titulo { 

font: bold 36px MiNuevaFuente, verdana, sans-serif; 

text-shadow: rgb(0,0,150) 3px 3px 5px; 

} 

@font-face { 

font-family: 'MiNuevaFuente'; 
sre: url('font.ttf'); 


Listado 3-10. Nueva fuente para el titulo. 


Hagalo usted mismo: Descargue el archivo font. ttf desde nuestro sitio web o use uno que ya posea y cópielo en el 



mismo directorio (carpeta) de su archivo CSS. Para descargar el archivo, visite el siguiente enlace: 
www.minkbooks.com/ content/font.ttf. Puede obtener mas fuentes similares de forma gratuita en 
www.moorstation.org/typoasis/designers/steffmann/. 

IMPORTANTE: El archivo conteniendo la fuente debe encontrarse en el mismo dominio que la pagina web (o en el 
mismo ordenador, en este caso). Esta es una restricción de algunos navegadores como Firefox, porejemplo. 

La propiedad @font-face necesita al menos dos estilos para declarar la fuente y cargar el archivo. El estilo construido 
eon la propiedad font-family especifica el nombre que queremos otorgar a esta fuente en particular, y la propiedad sre 
indica la URL del archivo eon el código correspondiente a esa fuente. En el Listado 3-10, el nombre MiNuevaFuente fue 
asignado a nuestro nuevo tipo de letra yel archivo font. ttf fue indicado como el archivo correspondiente a esta fuente. 

Una vez que la fuente es cargada, podemos comenzar a usarla en cualquier elemento del documento simplemente 
escribiendo su nombre (MiNuevaFuente). En el estilo font en la regla del Listado 3-10, especificamos que el tltulo sera 
mostrado eon la nueva fuente o las alternativas verdana y sans-serif en caso de que la fuente incorporada no sea cargada 
apropiadamente. 


Gradiente lineal 


Los gradientes son uno de los efectos mas atractivos entre aquellos incorporados en CSS3. Este efecto era practicamente 
imposible de implementar usando tecnicas anteriores pero ahora es realmente facil de hacer usando CSS. Una propiedad 
background eon algunos pocos parametros es suficiente para convertir su documento en una pagina web eon aspecto 
profesional: 


body { 

text-align: center; 

} 

tprincipal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px; 

-webkit-border-radius: 20px; 
border-radius: 20px; 

-moz-box-shadow: rgb(150,150,150) 5px 5px 10px; 
-webkit-box-shadow: rgb(150,150,150) 5px 5px 10px; 
box-shadow: rgb(150,150,150) 5px 5px 10px; 

background: -webkit-linear-gradient(top, #FFFFFF, #006699); 
background: -moz-linear-gradient(top, #FFFFFF, #006699); 

} 

#titulo { 

font: bold 36px MiNuevaFuente, verdana, sans-serif; 
text-shadow: rgb(0,0,150) 3px 3px 5px; 

} 

@font-face { 

font-family: 'MiNuevaFuente'; 
sre: url('font.ttf'); 


Listado 3-11. Agregando un hermoso gradiente de fondo a nuestra caja. 

Los gradientes son configurados como fondos, por lo que podemos usar las propiedades background obackground- 
image para declararlos. La sintaxis para los valores declarados en estas propiedades es linear-gradient(posición 
inicio, color inicial, color finał) . Los atributos de la función linear-gradient() indican el punto de comienzo y 
los colores usados para crear el gradiente. El primer valor puede ser especificado en pixeles, porcentaje o usando las 
palabras clave top, bottom, lefty right (como hicimos en nuestro ejemplo). El punto de comienzo puede ser reemplazado 
por un angulo para declarar una dirección especifica del gradiente: 



background: linear-gradient(30deg, #FFFFFF, #006699); 


Listado 3-12. Gradiente eon un śngulo de dirección de 30 grados. 
Tambien podemos declarar los puntos de terminación para cada color: 

background: linear-gradient(top, #FFFFFF 50%, #006699 90%); 

Listado 3-13. Declarando puntos de terminación. 


Gradiente radial 

La sintaxis estandar para los gradientes radiales solo difiere en unos pocos aspectos eon respecto a la anterior. Debemos 
usar la función radial-gradient() y un nuevo atributo para la forma: 


background: radial-gradient(center, circle, #FFFFFF 0%, #006699 200%); 


Listado 3-14. Gradiente radial. 

La posición de comienzo es el origen y puede ser declarada en pixeles, porcentaje o una combinación de las palabras 
clave center, top, bottom, left yright. Existen dos posibles valores para la forma (circle yellipse) y la terminación 
para el color indica el colory la posición donde las transiciones comienzan. 

Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 porel código del Listado 3-14 para probar 
el efecto en su navegador (no olvide agregar los prefijos -moz- o -webkit- dependiendo del navegador que este 
usando). 

IMPORTANTE: En este momento el efecto de gradientes ha sido implementado por los navegadores en diferentes 
formas. Lo que hemos aprendido en este capltulo es el estandar propuesto por W3C (World Wide Web Consortium). 
Navegadores como Firefox y Google Chrome ya incorporan una implementación que trabaja eon este estandar, pero 
Internet Explorer y otros aun se eneuentran ocupados en ello. Como siempre, pruebe sus códigos en cada navegador 
disponible en el mercado para comprobarel estado actual de las diferentes implementaciones. 


RGBA 


Hasta este momento los colores fueron declarados como sólidos utilizando valores hexadecimales o la función rgb() para 
decimales. CSS3 ha agregado una nueva función llamada rgba() que simplifica la asignación de colores y transparencias. 
Esta función ademas resuelve un problema previo provocado por la propiedad opacity. 

La función rgba () tiene cuatro atributos. Los primeros tres son similares a los usados en rgb () y simplemente declaran 
los valores para los colores rojo, verde y azul en numeros decimales del 0 al 255. El ultimo, en cambio, corresponde a la 
nueva capacidad de opacidad. Este valor se debe encontrar dentro de un rango que va de 0 a 1, eon 0 como totalmente 
transparente y 1 como totalmente opaco. 


#titulo { 

font: bold 36px MiNuevaFuente, verdana, sans-serif; 

text-shadow: rgba(0,0,0,0.5) 3px 3px 5px; 

} 


Listado 3-15. Mejorando ta sombra del texto eon transparencia. 

El Listado 3-15 ofrece un simple ejemplo que demuestra como los efectos son mejorados aplicando transparencia. 
Reemplazamos la función rgb () por rgba () en la sombra del tltulo y agregamos un valor de opacidad/transparencia de 0.5. 
Ahora la sombra de nuestro tltulo se mezclara eon el fondo, creando un efecto mucho mas natural. 

En previas versiones de CSS temamos que usar diferentes tecnicas en diferentes navegadores para hacer un elemento 
transparente. Todas presentaban el mismo problema: el valor de opacidad de un elemento era heredado por sus hijos. Ese 



problema fue resuelto porrgba() y ahora podemos asignar un valor de opacidad al fondo de una caja sin afectar su 
contenido. 

Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 porel código del Listado 3-15 para probar 
el efecto en su navegador. 


HSLA 


Del mismo modo que la función rgba () agrega un valor de opacidad argb(), la función hsla () hace lo mismo para la 
función hsl (). 

La función hsla () es simplemente un función diferente para generar colores, pero es mas intuitiva que rgba (). Algunos 
diseńadores encontraran mas facil generar un set de colores personalizado utilizando hsla (). La sintaxis de esta función es: 
hsla(tono, saturación, luminosidad, opacidad). 


#titulo { 

font: bold 36px MiNuevaFuente, verdana, sans-serif; 
text-shadow: rgba(0,0,0,0.5) 3px 3px 5px; 

color: hsla(120, 100%, 50%, 0.5); 

} 


Listado 3-16. Nuevo color para el tltulo usando hsiao. 

Siguiendo la sintaxis, tono representa el color extraldo de una rueda imaginaria y es expresado en grados desde 0 a 360. 
Cerca de 0 y 360 estan los colores rojos, cerca de 120 los verdes y cerca de 240 los azules. El valor saturación es 
representado en porcentaje, desde 0% (escala de grises) a 100% (todo color o completamente saturado). La luminosidad 
es tambien un valor en porcentaje desde 0% (completamente oscuro) a 100% (completamente iluminado). El valor 50% 
representa luminosidad normal o promedio. El ultimo valor, asi como en rgba (), representa la opacidad. 

Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 porel código del Listado 3-16 para probar 
el efecto en su navegador. 


Outline 


La propiedad outline es una vieja propiedad CSS que ha sido expandida en CSS3 para incluir un valor de desplazamiento. 
Esta propiedad era usada para crear un segundo borde, y ahora ese borde puede ser mostrado alejado del borde real del 
elemento. 


#principal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

outline: 2px dashed #000099; 
outline-offset: 15px; 


Listado 3-17. Agregando un segundo borde a la cabecera. 

En el Listado 3-17 agregamos a los estilos originalmente aplicados a la caja de nuestra plantilla un segundo borde de 2 
pixeles eon un desplazamiento de 15 pixeles. La propiedad outline tiene similares caracterlsticas y usa los mismos 
parametros que border. La propiedad outline-offset solo necesita un valoren pixeles. 

Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 porel código del Listado 3-17 para probar 
el efecto en su navegador. 



Border-image 


Los posibles efectos logrados por las propiedades border youtline estan limitados a lineas simples y solo algunas 
opciones de configuración. La nueva propiedad border-image fue incorporada para superar estas limitaciones y dejar en 
manos del diseńador la calidad yvariedad de bordes disponibles ofreciendo la alternativa de utilizar imagenes propias. 

Hagalo usted mismo: Vamos a utilizar una imagen PNG que incluye diamantes para probar esta propiedad. Siga el 
siguiente enlace para descargar el archivo diamonds.png desde nuestro sitio web y luego copie este archivo en el 
mismo directorio (carpeta) donde se encuentra su archivo CSS: vmw.minkbooks.com/content/diamonds.png. 

La propiedad border-image toma una imagen y la utiliza como patron. De acuerdo a los valores otorgados, la imagen es 
cortada como un pastel, las partes obtenidas son luego ubicadas alrededor del objęto para construir el borde. 

29px 

29px 



Figura 3-1. Este es el patron desde el cual vamos a construir nuestro borde. 

Cada pieza es de 29 pixeles de ancho, como indica la figura. 

Para hacer el trabajo, necesitamos especificar tres atributos: el nombre del archivo de la imagen, el tamańo de las piezas 
que queremos obtener del patron y algunas palabras clave para declarar como las piezas seran distribuidas alrededor del 
objęto. 


#principal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: 29px; 

-moz-border-image: url("diamonds.png") 29 stretch; 
-webkit-border-image: url("diamonds.png") 29 stretch; 
border-image: url("diamonds.png") 29 stretch; 

} 


Listado 3-18. Un borde personalizado para la cabecera. 

Con las modificaciones realizadas en el Listado 3-18 estamos definiendo un borde de 29 pixeles para la caja de nuestra 
cabecera y luego cargando la imagen diamonds .png para construir ese borde. El valor 29 en la propiedad border-image 
declara el tamańo de las piezas y stretch es uno de los metodos disponibles para distribuir estas piezas alrededor de la 
caja. 

Existen tres valores posibles para el ultimo atributo. La palabra clave repeat repetira las piezas tomadas de la imagen 
todas las veces que sea necesario para cubrir el lado del elemento. En este caso, el tamańo de las piezas es preservado y la 
imagen sera cortada si no existe mas espacio para ubicarla. La palabra clave round considerara que tan largo es el lado a 
ser cubierto y ajustara el tamańo de las piezas para asegurarse que cubren todo el lado y ninguna pieza es cortada. 
Finalmente, la palabra clave stretch (usada en el Listado 3-18) estira solo una pieza para cubrirel lado completo. 

En nuestro ejemplo utilizamos la propiedad border para definir el tamańo del borde, pero se puede tambien usar 
border-with para especificar diferentes tamańos para cada lado del elemento (la propiedad border-with usa cuatro 
parametros, con una sintaxis similar a margin ypadding). Lo mismo ocurre con el tamańo de cada pieza, hasta cuatro 
valores pueden ser declarados para obtener diferentes imagenes de diferentes tamańos desde el patron. 

Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 porel código del Listado 3-18 para probar 
el efecto en su navegador. 


Transform y transition 





Los elementos HTML, cuando son creados, son como bloques sólidos e inamovibles. Pueden ser movidos usando código 
Javascripto aprovechando librerfas populares como jQuery (www.jquery.com), porejemplo, pero no existla un procedimiento 
estandarpara este propósito hasta que CSS3 presentó las propiedades transformy transition. 

Ahora ya no tenemos que pensar en como hacerlo. En su lugar, solo tenemos que conocer como ajustar unos pocos 
parametros y nuestro sitio web puede sertan flexible ydinamico como lo imaginamos. 

La propiedad transform puede operarcuatro transformaciones basicas en un elemento: scalę (escalar), rotate (rotar), 
skew (inclinar) y translate (trasladar o mover). Veamos como funcionan: 


Transform: scalę 


tprincipal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: scalę(2); 
-webkit-transform: scalę(2); 


Listado 3-19. Cambiando la escala de la caja de la cabecera. 

En el ejemplo del Listado 3-19 partimos de los estilos basicos utilizados para la cabecera generada en el Listado 3-2 y 
aplicamos transformación duplicando la escala del elemento. La función scalę recibe dos parametros: el valorx para la 
escala horizontal y el valorY para la escala vertical. Si solo un valor es provisto el mismo valor es aplicado a ambos 
parametros. 

Numeros enteros ydecimales pueden ser declarados para la escala. Esta escala es calculada pormedio de una matriz. 
Los valores entre 0 y 1 reduciran el elemento, un valor de 1 mantendra las proporciones originales y valores mayores que 1 
aumentaran las dimensiones del elemento de manera incremental. 

Un efecto atractivo puede ser logrado eon esta función otorgando valores negativos: 


tprincipal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: scale(l,-l); 
-webkit-transform: scalę(1,-1); 


Listado 3-20. Creando una imagen espejo eon SC aie. 

En el Listado 3-20, dos parametros han sido declarados para cambiar la escala de la caja principal. El primer valor, 1 , 
mantiene la proporción original para la dimensión horizontal de la caja. El segundo valor tambien mantiene la proporción 
original, pero invierte el elemento verticalmente para producir el efecto espejo. 

Existen tambien otras dos funciones similares a scalę pero restringidas a la dimensión horizontal o vertical: scalex y 
scaleY. Estas funciones, porsupuesto, utilizan un solo parametro. 


Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 por el código del Listado 3-19 o 3-20 para 
probarel efecto en su navegador. 



Transform: rotate 


La función rotate rota el elemento en la dirección de las agujas de un reloj. El valor debe ser especificado en grados usando 
la unidad “deg”: 


#principal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: rotate(30deg); 
-webkit-transform: rotate(30deg); 


Listado 3-21. Rotando la caja. 

Si un valor negativo es declarado, solo cambiara la dirección en la cual el elemento es rotado. 

Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 porel código del Listado 3-21 para probar 
el efecto en su navegador. 


Transform: skew 


Esta función cambia la simetria del elemento en grados yen ambas dimensiones. 


tprincipal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: skew(20deg); 
-webkit-transform: skew(20deg); 


Listado 3-22. Inclinar horizontalmente. 

La función skew usa dos parametros, pero a diferencia de otras funciones, cada parametro de esta función solo afecta 
una dimensión (los parametros actuan de forma independiente). En el Listado 3-22, realizamos una operación transform a 
la caja de la cabecera para inclinarla. Solo declaramos el primer parametro, por lo que solo la dimensión horizontal de la caja 
sera modificada. Si usaramos los dos parametros, podrlamos alterar ambas dimensiones del objęto. Como alternativa 
podemos utilizarfunciones diferentes para cada una de ellas: skewxyskewY. 

Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 porel código del Listado 3-22 para probar 
el efecto en su navegador. 


Transform: translate 


Similara las viejas propiedades topyleft, la función translate mueve o desplaza el elemento en la pantalla a una nueva 
posición. 



tprincipal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: translate(100px); 
-webkit-transform: translate(100px); 


Listado 3-23. Moviendo la caja de la cabecera hacia la derecha. 

La función translate considera la pantalla como una grilla de pixeles, eon la posición original del elemento usada como 
un punto de referenda. La esquina superior izquierda del elemento es la posición 0,0, por lo que valores negativos moveran 
al objęto hacia la izquierda o hacia arriba de la posición original, y valores positivos lo haran hacia la derecha o hacia abajo. 

En el Listado 3-23, movimos la caja de la cabecera hacia la derecha unos 100 pixeles desde su posición original. Dos 
valores pueden ser declarados en esta función si queremos mover el elemento horizontal y verticalmente, o podemos usar 
funciones independientes llamadas translatexy translateY. 

Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 porel código del Listado 3-23 para probar 
el efecto en su navegador. 


Transformando todo al mismo tiempo 


Aveces podrla resultar util realizar sobre un elemento varias transformaciones al mismo tiempo. Para obtener una propiedad 
transform combinada, solo tenemos que separarcada función a aplicarcon un espacio: 


#principal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: translateY(100px) rotate(45deg) scaleX(0.3); 
-webkit-transform: translateY(100px) rotate(45deg) scaleX(0.3); 


Listado 3-24. Moviendo, escalando y rotando el elemento eon solo una linea de código. 

Una de las cosas que debe recordar en este caso es que el orden es importante. Esto es debido a que algunas funciones 
mueven el punto original y el centro del objęto, cambiando de este modo los parametros que el resto de las funciones 
utilizaran para operar. 

Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 porel código del Listado 3-24 para probar 
el efecto en su navegador. 


Transformaciones dinamicas 


Lo que hemos aprendido hasta el momento en este capftulo cambiara la forma de la web, pero la mantendra tan estatica 
como siempre. Sin embargo, podemos aprovecharnos de la combinación de transformaciones y pseudo clases para 
convertir nuestra pagina en una aplicación dinamica: 



#principal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

} 

#principal:hover{ 

-moz-transform: rotate(5deg); 
-webkit-transform: rotate(5deg); 


Listado 3-25. Respondiendo a la actividad del usuario. 

En el Listado 3-25, la regla original del Listado 3-2 para la caja de la cabecera fue conservada intacta, pero una nueva 
regla fue agregada para aplicar efectos de transformación usando la vieja pseudo clase :hover. El resultado obtenido es que 
cada vezque el puntero del ratón pasa sobre esta caja, la propiedad transform rota la caja en 5 grados, y cuando el puntero 
se aleja la caja vuelve a rotarde regreso a su posición original. Este efecto produce una animación basica pero util eon nada 
mas que propiedades CSS. 

Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 porel código del Listado 3-25 para probar 
el efecto en su navegador. 


Transiciones 


De ahora en mas, hermosos efectos usando transformaciones dinamicas son accesibles y faciles de implementar. Sin 
embargo, una animación real requiere de un proceso de mas de dos pasos. 

La propiedad transition fue incluida para suavizar los cambios, creando magicamente el resto de los pasos que se 
eneuentran implicitos en el movimiento. Solo agregando esta propiedad forzamos al navegador a tomar cartas en el asunto, 
crear para nosotros todos esos pasos invisibles, y generar una transición suave desde un estado al otro. 


tprincipal { 

display: błock; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transition: -moz-transform ls ease-in-out 0.5s; 
-webkit-transition: -webkit-transform ls ease-in-out 0.5s; 

} 

#principal:hover{ 

-moz-transform: rotate(5deg); 

-webkit-transform: rotate(5deg); 


Listado 3-26. Una herm osa rotación usando transiciones. 

Como puede ver en el Listado 3-26, la propiedad transition puede tomar hasta cuatro parametros separados por un 
espacio. El primer valor es la propiedad que sera considerada para hacer la transición (en nuestro ejemplo elegimos 
transform). Esto es necesario debido a que varias propiedades pueden cambiar al mismo tiempo y probablemente 
necesitemos crear los pasos del proceso de transición solo para una de ellas. El segundo parametro especifica el tiempo 
que la transición se tomara para ir de la posición inicial a la finał. El tercer parametro puede ser cualquiera de las siguientes 
palabras clave: ease, linear, ease-in, ease-out o ease-in-out. Estas palabras clave determinan como se realizara el 
proceso de transición basado en una curva Bezier. Cada una de ellas representa diferentes tipos de curva Bezier, y la mejor 
forma de saber como trabajan es viendolas funcionar en pantalla. El ultimo parametro para la propiedad transition es el 
retardo. Este indica cuanto tiempo tardara la transición en comenzar. 



Para producir una transición para todas las propiedades que estan cambiando en un objęto, la palabra clave all debe ser 
especificada. Tambien podemos declarar varias propiedades a la vezlistandolas separadas porcoma. 

Hagalo usted mismo: Reemplace el correspondiente código del Listado 3-11 porel código del Listado 3-26 para probar 
el efecto en su navegador. 

IMPORTANTE: En el Listado 3-26 realizamos una transición eon la propiedad transform. No todas las propiedades 
CSS son soportadas por la propiedad transition en este momento y probablemente la lista cambie eon el tiempo. 
Debera probar cada una de ellas por usted mismo o visitar el sitio web oficial de cada navegador para encontrar mas 
información al respecto. 



3.2 Referenda rapida 

CSS3 provee nuevas propiedades para crear efectos visuales y dinamicos que son parte esencial de la web en estos dias. 

border-radius Esta propiedad genera esquinas redondeadas para la caja formada por el elemento. Posee dos 
parametros diferentes que dan forma a la esquina. El primer parametro determina la curvatura horizontal y el 
segundo la vertical, otorgando la posibilidad de crear una elipsis. Para declarar ambos parametros de la curva, los 
valores deben ser separados por una barra (por ejemplo, border-radius: 15px / 20px). Usando solo un valor 
determinaremos la misma forma para todas las esquinas (por ejemplo, border-radius: 20px). Un valor para 
cada esquina puede ser declarado en un orden que sigue las agujas del reloj, comenzando por la esquina superior 
izquierda. 

box-shadow Esta propiedad crea sombras para la caja formada por el elemento. Puede tomar cinco parametros: el 
color, el desplazamiento horizontal, el desplazamiento vertical, el valor de difuminación, y la palabra clave inset para 
generar una sombra interna. Los desplazamientos pueden ser negativos, y el valor de difuminación y el valor inset 
son opcionales (por ejemplo, box-shadow: #000000 5px 5px 10px inset). 

text-shadow Esta propiedad es similar a box-shadow pero especffica para textos. Toma cuatro parametros: el color, el 
desplazamiento horizontal, el desplazamiento vertical, y el valor de difuminación (por ejemplo, text-shadow: 
#000000 5px 5px 10px). 

@font-face Esta regla nos permite cargar y usar cualquier fuente que necesitemos. Primero, debemos declarar la 
fuente, proveer un nombre eon la propiedad font-family y especificar el archivo eon sre (por ejemplo, @font- 
face{ font-family: Mifuente; sre: url ( ' font.ttf ') }). Luego de esto, podremos asignar la fuente (en el 
ejemplo Mifuente) a cualquier elemento del documento. 

linear-gradient(posición inicio, color inicial, color finał) Esta función puede ser aplicada a las propiedades 
background o background-image para generar un gradiente lineal. Los atributos indican el punto inicial y los 
colores usados para crear el gradiente. El primer valor puede ser especificado en pixeles, en porcentaje o usando 
las palabras clave top, bottom, left y right. El punto de inicio puede ser reemplazado por un angulo para proveer 
una dirección especffica para el gradiente (por ejemplo, linear-gradient(top, #ffffff 50%, #006699 

90%) ;). 

radial-gradient(posición inicio, forma, color inicial, color finał) Esta función puede ser aplicada a las propiedades 
background o background-image para generar un gradiente radial. La posición de inicio es el origen y puede ser 
declarado en pixeles, porcentaje o como una combinación de las palabras clave center, top, bottom, left y 
right. Existen dos valores para la forma: circle yellipse, y puntos de terminación pueden ser declarados para 
cada color indicando la posición donde la transición comienza (por ejemplo, radial-gradient(center, circle, 
#FFFFFF 0%, #006699 200%);). 

rgba() Esta función es una mejora de rgb() . Toma cuatro valores: el color rojo (0-255), el color verde (0-255), el color 
azul (0-255), y la opacidad (un valor entre 0 y 1). 

hsla() Esta función es una mejora de hsl () . Puede tomar cuatro valores: el tono (un valor entre 0 y 360), la saturación 
(un porcentaje), la luminosidad (un porcentaje), yla opacidad (un valor entre 0 y 1). 

outline Esta propiedad fue mejorada eon la incorporación de otrą propiedad llamada outline-offset. Ambas 
propiedades combinadas generan un segundo borde alejado del borde original del elemento (por ejemplo, 
outline: lpx solid #000000; outline-offset: 10px;). 

border-image Esta propiedad crea un borde eon una imagen personalizada. Necesita que el borde sea declarado 
previamente eon las propiedades border o border-with, ytoma al menos tres parametros: la URL de la imagen, 
el tamańo de las piezas que seran tomadas de la imagen para construirel borde, yuna palabra clave que especifica 
como esas piezas seran ubicadas alrededor del elemento (por ejemplo, border-image: url ("file.png") 15 
stretch;). 

transform Esta propiedad modifica la forma de un elemento. Utiliza cuatro funciones basicas: scalę (escalar), rotate 
(rotar), skew (inclinar), ytranslate (trasladar o mover). La función scalę recibe solo un parametro. Un valor 
negativo invierte el elemento, valores entre 0 y 1 reducen el elemento y valores mayores que 1 expanden el elemento 
(por ejemplo, transform: scalę (1.5) ;). La función rotate usa solo un parametro expresado en grados para 
rotar el elemento (por ejemplo, transform: rotate (20deg) ;). La función skew recibe dos valores, tambien en 
grados, para la transformación horizontal y vertical (por ejemplo, transform: skew(20deg, 20deg) ;). La función 
translate mueve el objęto tantos pixeles como sean especificados por sus parametros (por ejemplo, transform: 
translate (20px) ;). 

transition Esta propiedad puede ser aplicada para crear una transición entre dos estados de un elemento. Recibe 
hasta cuatro parametros: la propiedad afectada, el tiempo que le tomara a la transición desde el comienzo hasta el 
finał, una palabra clave para especificar como la transición sera realizada (ease, linear, ease-in, ease-out, 



ease-in-out) y un valor de retardo que determina el tiempo que la transición tardara en comenzar (por ejemplo, 
transition: color 2s linear ls;). 




Capitulo 4 
Javascript 


4.1 La relevancia de Javascript 


HTML5 puede ser imaginado como un edificio soportado por tres grandes columnas: HTML, CSS y Javascript. Ya hemos 
estudiado los elementos incorporados en HTML y las nuevas propiedades que hacen CSS la herramienta ideał para 
diseńadores. Ahora es momento de develar lo que puede ser considerado como uno de los pilares mas fuertes de esta 
especificación: Javascript. 

Javascript es un lenguaje interpretado usado para multiples propósitos pero solo considerado como un complemento 
hasta ahora. Una de las innovaciones que ayudó a cambiar el modo en que vemos Javascript fue el desarrollo de nuevos 
motores de interpretación, creados para acelerar el procesamiento de código. La clave de los motores mas exitosos fue 
transformar el código Javascript en código maquina para lograr velocidades de ejecución similares a aquellas encontradas 
en aplicaciones de escritorio. Esta mejorada capacidad permitió superar viejas limitaciones de rendimiento y confirmar el 
lenguaje Javascript como la mejor opción para la web. 

Para aprovechar esta prometedora plataforma de trabajo ofrecida por los nuevos navegadores, Javascript fue expandido 
en relación eon portabilidad e integración. Ala vez, interfaces de programación de aplicaciones (APIs)fueron incorporadas por 
defecto en cada navegador para asistir al lenguaje en funciones elementales. Estas nuevas APls (como Web Storage, 
Canvas, yotras) son interfaces para librerfas incluidas en navegadores. La idea es hacer disponible poderosas funciones a 
traves de tecnicas de programación sencillas yestandares, expandiendo el alcance del lenguaje yfacilitando la creación de 
programas utiles para la web. 

En este capitulo vamos a estudiar como incorporar Javascript dentro de nuestros documentos HTML y veremos las 
incorporaciones recientes a este lenguaje eon la intención de prepararnos para el resto del libro. 

IMPORTANTE: Nuestro acercamiento a Javascript en este libro es introductorio. Al igual que eon CSS, solo vamos a 
repasar las tecnicas que necesitamos entender para implementar los ejemplos de próximos capitulos. Trabajaremos 
sobre temas complejos, pero solo usando un rmnimo de código necesario para aprovechar estas nuevas 
caracteristicas. Si necesita expandir sus conocimientos sobre este lenguaje, visite nuestro sitio web y siga los enlaces 
correspondientes a este capitulo. 



4.2 Incorporando Javascript 


Siguiendo los mismos lineamientos que en CSS, existen tres tecnicas para incorporar código Javascript dentro de HTML. Sin 
embargo, al igual que en CSS, solo la inclusión de archivos externos es la recomendada a usaren HTML5. 

IMPORTANTE: En este capitulo introducimos nuevas caracterlsticas asf como tecnicas basicas necesarias para 
entender los ejemplos del libro. Si usted se encuentra familiarizado eon esta información sientase librę de obviar las 
partes que ya conoce. 


En linea 


Esta es una tecnica simple para insertar Javascript en nuestro documento que se aprovecha de atributos disponibles en 
elementos HTML. Estos atributos son manejadores de eventos que ejecutan código de aeuerdo a la acción del usuario. 

Los manejadores de eventos mas usados son, en generał, los relacionados eon el ratón, como por ejemplo onclick, 
onMouseOver, u onMouseOut. Sin embargo, encontraremos sitios web que implementan eventos de teclado yde la ventana, 
ejecutando acciones luego de que una tecla es presionada o alguna condición en la ventana del navegador cambia (por 
ejemplo, onload U onfocus). 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 
</head> 

<body> 

<div id="principal"> 

<p onclick="alert('hizo clic! ')">Hacer Clic</p> 
<p>No puede hacer clic</p> 

</div> 

</body> 

</html> 


Listado 4-1. Javascript en linea. 

Usando el manejador de eventos onclick en el Listado 4-1 , un código es ejecutado cada vezque el usuario hace clic eon 
el ratón sobre el texto que dice “Hacer Clic”. Lo que el manejador onclick esta diciendo es algo como: “cuando alguien haga 
clic sobre este elemento ejecute este código” y el código en este caso es una función predefinida en Javascript que muestra 
una pequeńa ventana eon el mensaje “hizo clic!”. 

Intente cambiar el manejador onclick por onMouseOver, por ejemplo, y vera como el código es ejecutado solo pasando 
el puntero del ratón sobre el elemento. 

El uso de Javascript dentro de etiquetas HTML esta permitido en HTML5, pero por las mismas razones que en CSS, esta 
clase de practica no es recomendable. El código HTML se extiende innecesariamente y se hace dificil de mantener y 
actualizar. Asi mismo, el código distribuido sobre todo el documento complica la construcción de aplicaciones utiles. 

Nuevos metodos y tecnicas fueron desarrollados para referenciar elementos HTML y registrar manejadores de eventos 
sin tener que usar código en linea ( inline). Volveremos sobre esto y aprenderemos mas sobre eventos y manejadores de 
eventos mas adelante en este capitulo. 

Hagalo usted mismo: Copie el código del Listado 4-1 y los siguientes códigos estudiados en este capitulo dentro de un 
nuevo archivo HTML. Abra el archivo en su navegador para probar cada ejemplo. 


Embebido 


Para trabajar eon códigos extensos y funciones personalizadas debemos agrupar los códigos en un mismo lugar entre 
etiquetas <script>. El elemento <script> actua exactamente igual al elemento <style> usado para incorporar estilos 
CSS. Nos ayuda a organizar el código en un solo lugar, afectando a los elementos HTML por medio de referencias. 

Del mismo modo que eon el elemento <style>, en HTML5 no debemos usar ningun atributo para especificar lenguaje. 
Ya no es necesario incluir el atributo type en la etigueta <script>. HTML5 asigna Javascript por defecto. 



<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 

<script> 

function mostraralerta(){ 
alert('hizo clic!'); 

} 

function hacerclic(){ 

document.getElementsByTagName(' p' ) [0] .onclick=mostraralerta; 

} 

window.onload=hacerclic; 

</script> 

</head> 

<body> 

<div id="principal"> 

<p>Hacer Clic</p> 

<p>No puede hacer Clic</p> 

</div> 

</body> 

</html> 


Listado 4-2. Javascript embebido. 

El elemento <script> y su contenido pueden ser posicionados en cualquier lugar del documento, dentro de otros 
elementos o entre ellos. Para mayor claridad, recomendamos siempre colocar sus códigos Javascript en la cabecera del 
documento (como en el ejemplo del Listado 4-2) y luego referenciar los elementos a ser afectados usando los metodos 
Javascript apropiados para ese propósito. 

Actualmente existen tres metodos disponibles para referenciar elementos HTML desde Javascript: 

• getElementsByTagName (usado en el Listado 4-2) referenda un elemento por su nombre o palabra clave. 

• getElementByld referenda un elemento por el valor de su atributo id. 

• getElementsByClassName es una nueva incorporación que nos permite referenciar un elemento por el valor de 
su atributo class. 

Incluso si seguimos la practica recomendada (posicionar el código dentro de la cabecera del documento), una situación 
debe ser considerada: el código del documento es leido de forma secuencial por el navegador y no podemos referenciar un 
elemento que aun no ha sido creado. 

En el Listado 4-2, el código es posicionado en la cabecera del documento y es leido por el navegador previo a la creación 
del elemento <p> que estamos referenciando. Si hubiesemos intentado afectar el elemento <p> directamente eon una 
referenda, hubieramos recibido un mensaje de error anunciando que el elemento no existe. Para evitar este problema, el 
código fue convertido a una función llamada mostraralerta (), y la referenda al elemento <p> junto eon el manejador del 
evento fueron colocados en una segunda función llamada hacerclic (). 

Las funciones son llamadas desde la ultima Ifnea del código usando otro manejador de eventos (en este caso asociado 
eon la ventana) llamado onload. Este manejador ejecutara la función hacerclic () cuando el documento sea 
completamente cargado ytodos los elementos creados. 

Es tiempo de analizar como el documento del Listado 4-2 es ejecutado. Primero las funciones Javascript son cargadas 
(declaradas) pero no ejecutadas. Luego los elementos HTML, incluidos los elementos <p>, son creados. Y finalmente, 
cuando el documento completo es cargado en la ventana del navegador, el evento load es disparado y la función 
hacerclic () es llamada. 

En esta función, el metodo getElementsByTagName referenda todos los elementos <p>. Este metodo retorna un arreglo 
(array) conteniendo una lista de los elementos de la clase especificada encontrados en el documento. Sin embargo, usando 
el indice [0] al finał del metodo indicamos que solo queremos que el primer elemento de la lista sea retornado. Una vezque 
este elemento es identificado, el código registra el manejador de eventos onclick para el mismo. La función 
mostraralerta () sera ejecutada cuando el evento click es disparado sobre este elemento mostrando el mensaje “hizo 
clic!”. 

Puede parecer mucho código y trabajo para reproducir el mismo efecto logrado por una simple linea en el ejemplo del 
Listado 4-1. Sin embargo, considerando el potencial de HTML5 y la complejidad alcanzada por Javascript, la concentración 
del código en un unico lugar y la apropiada organización representa una gran ventaja para nuestras futuras 




implementaciones ypara hacer nuestros sitios web y aplicaciones faciles de desarrollarymantener. 

Conceptos basicos: Una función es un código agrupado que es ejecutado solo cuando la función es invocada (activada 
o llamada) por su nombre. Normalmente, una función es llamada usando su nombre y algunos valores encerrados 
entre parentesis (por ejemplo, hacerclic (1,2) ). Una excepción a esta sintaxis es usada en el Listado 4-2. En este 
código no usamos parentesis porque estamos pasando al evento solo la referencia a la función, no el resultado de su 
ejecución. Para aprender mas sobre funciones Javascript, visite nuestro sitio web ysiga los enlaces correspondientes a 
este capitulo. 


Archivos externos 


Los códigos Javascript crecen exponencialmente cuando agregamos nuevas funciones y aplicamos algunas de las APls 
mencionadas previamente. Códigos embebidos incrementan el tamańo de nuestros documentos y los hacen repetitivos 
(cada documento debe volver a incluir los mismos códigos). Para reducir los tiempos de descarga, incrementar nuestra 
productividad y poder distribuir y reusar nuestros códigos en cada documento sin comprometer eficiencia, recomendamos 
grabartodos los códigos Javascripten uno o mas archivos externos yllamarlos usando el atributo src: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 

<script src="micodigo. js"X/script> 

</head> 

<body> 

<div id="principal"> 

<p>Hacer Clic</p> 

<p>No puede hacer Clic</p> 

</div> 

</body> 

</html> 


Listado 4-3. Cargando el código desde archivos externos. 

El elemento <script> en el Listado 4-3 carga los códigos Javascript desde un archivo externo llamado micodigo. js. De 
ahora en mas, podremos insertar nuestros códigos en este archivo y luego incluir el mismo en cualquier documento de 
nuestro sitio web que lo necesite. Desde la perspectiva del usuario, esta practica reduce tiempos de descarga yacceso a 
nuestro sitio web, mientras que para nosotros simplifica la organización yfacilita el mantenimiento. 

Hagalo usted mismo: Copie el código del Listado 4-3 dentro del archivo HTML previamente creado. Cree un nuevo 
archivo de texto vacfo llamado micodigo. js y copie en su interior el código Javascript del Listado 4-2. Tenga en cuenta 
que solo el código entre las etiquetas <script> debe ser copiado, sin incluir las etiquetas mismas. 



4.3 Nuevos Selectores 


Como vimos anteriormente, los elementos HTML tienen que ser referenciados desde Javascript para ser afectados por el 
código. Si recuerda de previos capitulos, CSS, y especialmente CSS3, ofrece un poderoso sistema de referenda yselección 
que no tiene comparación eon los pocos metodos provistos por Javascript para este propósito. Los metodos 
getElementByld, getElementsByTagName y getElementsByClassName no son suficientes para contribuir a la integración 
que este lenguaje necesita ysostenerla relevancia que posee dentro de la especificación de HTML5. Para elevar Javascript al 
nivel que las circunstancias requieren, nuevas alternativas debieron ser incorporadas. Desde ahora podemos seleccionar 
elementos HTML aplicando toda clase de selectores CSS por medio de los nuevos metodos querySelector () y 
guerySelectorAll(). 


querySelector() 


Este metodo retorna el primer elemento que concuerda eon el grupo de selectores especificados entre parentesis. Los 
selectores son declarados usando comillas yla misma sintaxis CSS, como en el siguiente ejemplo: 


function hacerclic(){ 

document.ąuerySelector("#principal p:first- 

child").onclick=mostraralerta; 


function mostraralerta(){ 
alert('hizo clic!'); 

} 

window.onload=hacerclic; 


Listado 4-4. Usando querySelector(). 

En el Listado 4-4, el metodo getElementsByTagName usado anteriormente ha sido reemplazado por ąuerySelector(). 
Los selectores para esta consulta en particular estan referenciando al primer elemento <p> que es hijo del elemento 
identificado eon el atributo idyel valormain. 

Debido a que ya explicamos que este metodo solo retorna el primer elemento encontrado, probablemente notara que la 
pseudo clase first-child es redundante. El metodo querySelector () en nuestro ejemplo retornara el primer elemento 
<P> dentro de <div> que es, por supuesto, su primer hijo. El propósito de este ejemplo es mostrarle que ąuerySelector () 
acepta toda clase de selectores validos CSS yahora, del mismo modo que en CSS, Javascript tambien provee herramientas 
importantes para referenciar cada elemento en el documento. 

Varios grupos de selectores pueden ser declarados separados por coma. El metodo ąuerySelector () retornara el 
primer elemento que concuerde eon cualquiera de ellos. 

Hagalo usted mismo: Reemplace el código en el archivo micodigo. js por el provisto en el Listado 4-4 y abra el archivo 
HTML eon el código del Listado 4-3 en su navegador para ver el metodo ąuerySelector () en acción. 


querySelectorAII() 


En lugar de uno, el metodo ąuerySelectorAll () retorna todos los elementos que concuerdan eon el grupo de selectores 
declarados entre parentesis. El valor retornado es un arreglo (array) conteniendo cada elemento encontrado en el orden en el 
que aparecen en el documento. 


function hacerclic(){ 

var lista=document.querySelectorAll("#principal p"); 

lista[0].onclick=mostraralerta; 

} 

function mostraralerta(){ 
alert('hizo clic!'); 

} 

window.onload=hacerclic; 


Listado 4-5. Usando guerySelectorAll (). 







El grupo de selectores especificados en el metodo querySelectorAll () del Listado 4-5 encontrara cada elemento <p> 
en el documento HTML del listado 4-3 que es hijo del elemento <div>. Luego de la ejecución de esta primera linea, el array 
lista tendra dos valores: una referenda al primer elemento <p> y una referenda al segundo elemento <p>. Debido a que el 
indice de cada array comienza porO, en la próxima linea el primer elemento encontrado es referenciado usando corchetes yel 
valor 0 (lista [0]). 

Notę que este ejemplo no muestra el potencial de querySelectorAll (). Normalmente sera utilizado para afectar a 
varios elementos yno solo uno, como en este caso. Para interactuar eon una lista de elementos retornados por este metodo, 
podemos utilizarun bucie for: 


function hacerclic(){ 

var lista=document.ąuerySelectorAll("tprincipal p") ; 

for(var f=0; f<lista.length; f++){ 
lista[f].onclick=mostraralerta; 

} 

} 

function mostraralerta(){ 
alert('hizo clic!'); 

} 

window.onload=hacerclic; 


Listado 4-6. Afectando todos los elementos encontrados por querySelectorAll (). 

En el Listado 4-6, en lugar de seleccionar solo el primer elemento encontrado, registramos el manejador de eventos 
onclick para cada uno de ellos usando un bucie for. Ahora, todos los elementos <p> dentro de <div> mostraran una 
pequeńa ventana cuando el usuario haga clic sobre ellos. 

El metodo ąuerySelectorAll (), al igual que ąuerySelector (), puede contener uno o mas grupos de selectores 
separados porcoma. Estos ylos demas metodos estudiados pueden ser combinados para referenciar elementos a los que 
resulta dificil llegar. Por ejemplo, en el próximo listado, el mismo resultado del código del Listado 4-6 es logrado utilizando 
ąuerySelectorAll() y getElementByld ()juntos: 


function hacerclic(){ 

var lista=document.getElementByld('principal'). 

ąuerySelectorAll("p"); 

lista[0].onclick=mostraralerta; 

} 

function mostraralerta(){ 
alert('hizo clic!'); 

} 

window.onload=hacerclic; 


Listado 4-7. Combinando metodos. 

Usando esta tecnica podemos ver que precisos pueden ser estos metodos. Podemos combinarlos en una misma linea y 
luego realizar una segunda selección eon otro metodo para alcanzar elementos dentro de los primeros. En próximos 
capitulos estudiaremos algunos ejemplos mas. 






4.4 Manejadores de eventos 


Como comentamos anteriormente, el código Javascript es normalmente ejecutado luego de que el usuario realiza alguna 
acción. Estas acciones yotros eventos son procesados por manejadores de eventos yfunciones Javascript asociadas eon 
ellos. 

Existen tres diferentes formas de registrar un evento para un elemento HTML: podemos agregar un nuevo atributo al 
elemento, registrar un manejador de evento como una propiedad del elemento o usar el nuevo metodo estandar 
addEventListener(). 

Conceptos basicos: En Javascript las acciones de los usuarios son llamadas eventos. Cuando el usuario realiza una 
acción, como un clic del ratón o la presión de una tecla, un evento especifico para cada acción y cada elemento es 
disparado. Ademas de los eventos producidos por los usuarios existen tambien otros eventos disparados por el 
sistema (por ejemplo, el evento load que se dispara cuando el documento es completamente cargado). Estos eventos 
son manejados por códigos o funciones. El código que responde al evento es llamado manejador. Cuando registramos 
un manejador lo que hacemos es definir como nuestra aplicación respondera a un evento en particular. Luego de la 
estandarización del metodo addEventListener (), este procedimiento es usualmente llamado “escuchar al evento”, y 
lo que hacemos para preparar el código que respondera a ese evento es “agregar una escucha” a un elemento en 
particular. 


Manejadores de eventos en linea 


Ya utilizamos esta tecnica en el código del Listado 4-1 incluyendo el atributo onclick en el elemento <p> (revise este código 
para comprobar como se aplica). Se trata simplemente de utilizar los atributos provistos por HTML para registrar eventos para 
un elemento en particular. Esta es una tecnica en desuso pero aun extremadamente util y practica en algunas circunstancias, 
especialmente cuando necesitamos hacer modificaciones rapidas para testeo. 


Manejadores de eventos como propiedades 


Para evitar las complicaciones de la tecnica en linea (inline), debemos registrar los eventos desde el código Javascript. 
Usando selectores Javascript podemos referenciar el elemento HTML y asignarle el manejador de eventos que queremos 
como si fuese una propiedad. 

En el código del Listado 4-2 encontrara esta tecnica puesta en practica. Dos manejadores de eventos fueron asignados 
como propiedades a diferentes elementos. El manejador de eventos onload fue registrado para la ventana usando la 
construcción window. onload, y el manejador de eventos onclick fue registrado para el primer elemento <p> encontrado en 
el documento eon la linea de código document.getElementsByTagName ('p ') [0] .onclick. 

Conceptos Basicos: Los nombres de los manejadores de eventos son construidos agregando el prefijo on al nombre 
del evento. Por ejemplo, el nombre del manejador de eventos para el evento click es onclick. Cuando estamos 
hablando sobre onclick usualmente hacemos referenda al código que sera ejecutado cuando el evento click se 
produzca. 

Antes de HTML5, esta era la unica tecnica disponible para usar manejadores de eventos desde Javascript que funcionaba 
en todos los navegadores. Algunos fabricantes de navegadores estaban desarrollando sus propios sistemas, pero nada fue 
adoptado por todos hasta que el nuevo estandar fue declarado. Por este motivo recomendamos utilizar esta tecnica por 
razones de compatibilidad, pero no la sugerimos para sus aplicaciones HTML5. 


El metodo addEventl_istener() 


El metodo addEventListener () es la tecnica ideał y la que es considerada como estandar por la especificación de HTML5. 
Este metodo tiene tres argumentos: el nombre del evento, la función a ser ejecutada y un valor booleano (falso o verdadero) 
que indica como un evento sera disparado en elementos superpuestos. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 

<script> 


function mostraralerta(){ 
alert('hizo clic!'); 

} 

function hacerclic(){ 

var elemento=document.getElementsByTagName('p')[0] ; 
elemento.addEventListener('click', mostraralerta, false); 

} 

window.addEventListener('load', hacerclic, false); 

</script> 

</head> 

<body> 

<div id="principal"> 

<p>Hacer Clic</p> 

<p>No puede hacer Clic</p> 

</div> 

</body> 

</html> 


Listado 4-8. Agregando escuchas para eventos eon addEventListener(). 


El Listado 4-8 presenta el mismo código que el Listado 4-2 pero ahora una escucha fue agregada para cada evento 
usando el metodo addEventListener (). Para organizar el código en la función hacerclic (), asignamos la referenda al 
elemento a una variable llamada elemento yluego agregamos la escucha para el evento click usando esa variable. 

La sintaxis del metodo addEventListener () es la mostrada en el Listado 4-8. El primer atributo es el nombre del evento. 
El segundo es la función a ser ejecutada, la cual puede ser una referenda a una función (como en este caso) o una función 
anonima. El tercer atributo especificara, usando true (verdadero) o false (falso), como multiples eventos seran disparados. 
Por ejemplo, si estamos escuchando al evento click en dos elementos que se eneuentran anidados (uno dentro de otro), 
cuando el usuario hace clic sobre estos elementos dos eventos click son disparados en un orden que depende de este 
valor. Si el atributo es declarado como true para uno de los elementos, entonces ese evento sera considerado primero y el 
otro luego. Normalmente el valor false es el mas adecuado para la mayoria de las situaciones. 

Conceptos basicos: Funciones anónimas son funciones dinamicamente declaradas y que no tienen nombre (por esto 
son llamadas “anónimas”). Esta clase de funciones son extremadamente utiles en Javascript, nos ayudan a organizar 
el código y no sobre poblar el objęto global eon funciones independientes. Usaremos funciones anónimas eon 
frecuencia en los siguientes capitulos. 

Incluso cuando los resultados de aplicar esta tecnica y la anterior son similares, addEventListener () nos permite 
agregar tantas escuchas como necesitemos para el mismo elemento. Esta distinción le otorga a addEventListener () una 
ventaja sobre el resto, convirtiendola en la tecnica ideał para aplicaciones HTML5. 

Debido a que los eventos son la clave para sitios webs y aplicaciones interactivas, varios fueron agregados en la 
especificación de HTML5. En próximos capitulos estudiaremos cada uno de estos nuevos eventos y el entorno en el cual 
trabajan. 




4.5 APls 


Si cuenta eon alguna experiencia anterior en programación, o simplemente siguió este capitulo desde el comienzo, le 
resultara facil reconocer la cantidad de código necesario para realizar tareas sencillas. Ahora imagine todo el trabajo que 
deberia hacer para construir un sistema de bases de datos desde cero, o generar graficos complejos en la pantalla, o crear 
una aplicación para manipulación de imagenes, por nombrar unos pocos. 

Javascript es tan poderoso como cualquier otro lenguaje de desarrollo en este momento. Y por la misma razón que 
lenguajes de programación profesionales poseen librerias para crear elementos graficos, motores 3D para video juegos o 
interfaces para acceder a bases de datos, Javascript cuenta eon APls para ayudar a los programadores a lidiar eon 
actividades complejas. 

HTML5 introduce varias APls (interfaces de programación de aplicaciones) para proveer acceso a poderosas librerias 
desde simple código Javascript. El potencial de estas incorporaciones es tan importante que pronto se convertiran en nuestro 
objęto de estudio. Veamos rapidamente sus caracteristicas para obtener una perspectiva de lo que nos encontraremos en el 
resto del libro. 

La siguiente es solo una introducción, mas adelante estudiaremos cada una de estas tecnologias eon mayor profundidad. 


Canvas 


Canvases una API grafica que provee una basica pero poderosa superficie de dibujo. Esta es la mas maravillosa y 
prometedora API de todas. La posibilidad de generar e imprimir graficos en pantalla, crear animaciones o manipular 
imagenes y videos (combinado eon la funcionalidad restante de HTML5) abre las puertas para lo que nos podamos imaginar. 

Canvasgenera una imagen eon pixeles que son creados y manipulados por funciones y metodos provistos 
especificamente para este propósito. 


Drag and Drop 


Drag and Drop incorpora la posibilidad de arrastrar y soltar elementos en la pantalla como lo harfamos comunmente en 
aplicaciones de escritorio. Ahora, eon unas pocas Ifneas de código, podemos hacer que un elemento este disponible para 
ser arrastrado ysoltado dentro de otro elemento en la pantalla. Estos elementos pueden incluirno solo graficos sino ademas 
textos, enlaces, archivos o datos en generał. 


Geolocation 


Geolocation es utilizada para establecer la ubicación ffsica del dispositivo usado para acceder a la aplicación. Existen varios 
metodos para acceder a esta información, desde seńales de red hasta el Sistema de Posicionamiento Global (GPS). Los 
valores retornados incluyen latitud y longitud, posibilitando la integración de esta API eon otras como Google Maps, por 
ejemplo, o acceder a información de localización especifica para la construcción de aplicaciones practicas que trabajen en 
tiempo real. 


Sto ragę 


Dos APls fueron creadas eon propósitos de almacenamiento de datos: Web Storage e lndexed Database. Basicamente, 
estas APls transfieren la responsabilidad por el almacenamiento de datos del servidor al ordenador del usuario, pero en el 
caso de Web Storage ysu atributo sessionStorage, esta incorporación tambien inerementa el nivel de control yla eficiencia de 
las aplicaciones web. 

Web Storage contiene dos importantes atributos que son a veces considerados APls por si mismos: sessionStorage y 
localStorage. 

El atributo sessionStorage es responsable por mantener consistencia sobre la duración de la sesión de una pagina web y 
preservar información temporal como el contenido de un carro de compras, asegurando los datos en caso de accidente o mai 
uso (cuando la aplicación es abierta en una segunda ventana, por ejemplo). 

Por el otro lado, el atributo localStorage nos permite grabar contenidos extensos de información en el ordenador del 
usuario. La información almacenada es persistente yno expira, excepto porrazones de seguridad. 

Ambos atributos, sessionStorage y localStorage reemplazan la anterior función del sistema de cookies y fueron creados 



para superar sus limitaciones. 


La segunda API, agrupada dentro de las APls de almacenamiento pero independiente del resto, es lndexed Database. La 
función elemental de un sistema de base de datos es la de almacenar información indexada. Web Storage API trabaja sobre 
el almacenamiento de grandes o pequeńas cantidades de información, datos temporales o permanentes, pero no datos 
estructurados. Esta es una posibilidad solo disponible para sistemas de base de datos y la razón de la existencia de esta 
API. 

Indexed Database es una sustitución de la API Web SQL Database. Debido a desacuerdos acerca del estandar apropiado 
a utilizar, ninguna de estas dos APls ha sido completamente adoptada. De hecho, en este mismo momento, el desarrollo de 
Web SQL Database API (la cual habia sido recibida eon brazos abiertos al comienzo), ha sido cancelado. 

Debido a que la API lndexed Database, tambien conocida como lndexedDB, luce mas prometedora y tiene el apoyo de 
Microsoft, los desarrolladores de Firefox y Google, sera nuestra opción para este libro. Sin embargo, tenga siempre presente 
que en este momento nuevas implementaciones de SQL estan siendo consideradas y la situación podrfa cambiar en el 
futuro cercano. 


File 


Bajo el tltulo de File, FITML5 ofrece varias APls destinadas a operar eon archivos. En este momento existen tres disponibles: 
File, File: Directories & System, y File: Writer. 

Gracias a este grupo de APls, ahora podemos crearyprocesararchivos en el ordenadordel usuario. 


Communication 


Algunas API tienen un denominador comun que nos permite agruparlas juntas. Este es el caso para XMLHttpRequest Level 
2, Cross Document Messaging, y Web Sockets. 

Internet ha estado siempre relacionado eon comunicaciones, porsupuesto, pero algunos asuntos no resueltos haefan el 
proceso complicado yen ocasiones imposible. Tres problemas especificos fueron abordados en FITML5: la API utilizada para 
la creación de aplicaciones Ajax no estaba completa yera complicada de implementara traves de distintos navegadores, la 
comunicación entre aplicaciones no relacionadas era no existia, y no habia forma de establecer una comunicación 
bidireccional efectiva para accedera información en el servidoren tiempo real. 

El primer problema fue resuelto eon el desarrollo de XMLHttpRequest Level 2. XMLHttpRequest fue la API usada por 
mucho tiempo para crear aplicaciones Ajax, códigos que acceden al servidor sin recargar la pagina web. El nivel 2 de esta API 
incorpora nuevos eventos, provee mas funcionalidad (eon eventos que permiten hacer un seguimiento del proceso), 
portabilidad (la API es ahora estandar), y accesibilidad (usando solicitudes cruzadas, desde un dominio a otro). 

La solución para el segundo problema fue la creación de Cross Document Messaging. Esta API ayuda a los 
desarrolladores a superar las limitaciones existentes para comunicar diferentes cuadros y ventanas entre si. Ahora una 
comunicación segura a traves de diferentes aplicaciones es ofrecida por esta API utilizando mensajes. 

La solución para el ultimo de los problemas listados anteriormente es Web Sockets. Su propósito es proveer las 
herramientas necesarias para la creación de aplicaciones de red que trabajan en tiempo real (porejemplo, salas de chat). La 
API les permite a las aplicaciones obtener y enviar información al servidor en periodos cortos de tiempo, volviendo posible las 
aplicaciones en tiempo real para la web. 


Web Workers 


Esta es una API unica que expande Javascripta un nuevo nivel. Este lenguaje no es un lenguaje multitarea, lo que significa 
que solo puede hacerse cargo de una sola tarea a la vez. Web Workers provee la posibilidad de procesar código detras de 
escena (ejecutado aparte del resto), sin interferir eon la actividad en la pagina web y del código principal. Gracias a esta API 
Javascript ahora puede ejecutar multiples tareas al mismo tiempo. 


History 


Ajax cambió la forma en la que los usuarios interactuan eon sitios y aplicaciones web. Y los navegadores no estaban 
preparados para esta situación. History fue implementada para adaptar las aplicaciones modernas a la forma en que los 
navegadores hacen seguimiento de la actividad del usuario. Esta API incorpora tecnicas para generar artificialmente URLs 
porcada paso en el proceso, ofreciendo la posibilidad de retorna a estados previos de la aplicación utilizando procedimientos 



estandarde navegación. 


Offline 


Incluso hoy dla, eon acceso a Internet en cada lugar que vamos, quedar desconectado es aun posible. Dispositivos portatiles 
se eneuentran en todas partes, pero no la serial para establecer comunicación. Y los ordenadores de escritorio tambien 
pueden dejarnos desconectados en los momentos mas criticos. Con la combinación de atributos HTML, eventos controlados 
por Javascript y archivos de texto, Offline permitira a las aplicaciones trabajar en llnea o desconectados, de aeuerdo a la 
situación del usuario. 



4.6 Librerias externas 


HTML5 fue desarrollado para expandir la web utilizando un set de tecnologias estandar que todo navegador pueda entender y 
procesar. Y fue creado para proveer todas las herramientas que un desarrollador necesita. De hecho, HTML5 fue 
conceptualizado para no depender de tecnologias de terceras partes. Pero por una razón u otrą siempre necesitaremos 
contar eon ayuda extra. 

Antes de la aparición de HTML5, varias librerias Javascript fueron desarrolladas para superar las limitaciones de las 
tecnologias disponibles al momento. Algunas de estas librerias tenian propósitos especificos (desde procesamiento y 
validación de formularios hasta generación y manipulación de graficos). Algunas se volvieron extremadamente populares y 
otras son casi imposibles de imitar por desarrolladores independientes (como es el caso de Google Maps). 

Incluso cuando futuras implementaciones provean mejores metodos o funciones, los programadores siempre 
encontraran una manera mas facil de lidiar eon un asunto determinado. Librerias desarrolladas por terceros que facilitan 
tareas complicadas siempre estaran vivas ycreciendo en numero. 

Estas librerias no son parte de HTML5 pero son una parte importante de la web y algunas de ellas son actualmente 
usadas en sitios web y aplicaciones exitosas. Junto eon el resto de las funciones incorporadas por esta especificación, 
mejoran Javascript y acercan las tecnologias de ultima generación al publico en generał. 


jQuery 


Esta es la libreria web mas popular disponible en estos dias. La libreria jQuery es gratuita yfue diseńada para simplificar la 
creación de sitios web modernos. Facilita la selección de elementos HTML, la creación de animaciones y efectos, ytambien 
controla eventos yayuda a implementar Ajaxen nuestras aplicaciones. 

La libreria jQuery se eneuentra en un archivo pequeńo que se puede descargar desde www.jquery.com y luego incluir en 
nuestros documentos usando la etiqueta <script>. Provee unaAPI sencilla que cualquiera puede aprender y rapidamente 
aplicara sus proyectos. 

Una vez que el archivo provisto por jQuery es incluido en nuestro documento, ya estamos listos para aprovechar los 
metodos simples incorporados por la libreria yconvertir nuestra web estatica en una moderna y practica aplicación. 

jOuerytiene la ventaja de proveer soporte para viejos navegadores yvuelve simple tareas cotidianas. Puede ser utilizado 
junto eon HTML5 o como una forma simple de reemplazar funciones de HTML5 en navegadores que no estan preparados 
para esta tecnologia. 


Google Maps 


Accesible por medio de Javascript (y otras tecnologias), Google Maps es un complejo y unico set de herramientas que nos 
permite desarrollar cualquier servicio de mapeado para la web que podamos imaginar. Google se ha vuelto el lider en esta 
clase de servicios ya traves de la tecnologia Google Maps provee acceso a un extremadamente preciso ydetallado mapa del 
mundo. Utilizando esta API podemos encontrar lugares especificos, calcular distancias, hallar sitios populares o incluso 
obtener una vista del lugar seleccionado como si estuvieramos presentes. 

Google Maps es gratuita y disponible para todo desarrollador. Diferentes versiones de la API se pueden encontrar en: 
code.google.com/apis/maps/. 



4.7 Referenda rapida 


En HTML5, Javascriptfue mejorado pormedio de la adición de nuevas funciones yla incorporación de metodos nativos. 


Elementos 


<script> Este elemento ahora tiene a Javascript como el lenguaje pordefecto. El atributo type ya no es necesario. 


Selectores 


La posibilidad de seleccionar un elemento del documento dinamicamente desde código Javascript se ha vuelto esencial para 
cualquier aplicación web. Nuevos metodos han sido incorporados eon este propósito. 

getElementsByClassName Este selector nos permite encontrar elementos en el documento por medio del valor de su 
atributo class. Es una adición a los ya conocidos getElementsByTagName y getElementByld. 

querySelector(selectores) Este metodo usa selectores CSS para referenciar elementos en el documento. Los 
selectores son declarados entre parentesis. Este metodo puede ser combinado eon otros para construir referencias 
mas especificas. Retorna solo el primer elemento encontrado. 

querySelectorAII(selectores) Este metodo es similar a ąuerySelector () pero retorna todos los elementos que 
concuerdan eon los selectores especificados. 


Eventos 


La relevancia de los eventos en las aplicaciones web motivó la estandarización de metodos ya disponibles en navegadores 
lideres. 

addEventListener(evento, manejador, captura) Este metodo es usado para agregar una escucha para un evento. El 
metodo recibe tres valores: el nombre del evento, la función que respondera al evento, y un valor booleano 
(verdadero o falso) que indica el orden de ejecución de varios eventos disparados al mismo tiempo. Normalmente el 
tercer atributo es configurado como false. 

removeEventListener(evento, manejador, captura) Este metodo es usado para remover una escucha para un evento, 
desactivando el manejador. Los valores necesarios son los mismos que los usados para addEventListener (). 


APls 


El alcance de Javascript ha sido expandido eon un grupo de poderosas librerias accesibles a traves de interfaces llamadas 
APls. 


Canvas Esta API es una API de dibujo, especifica para la creación y manipulación de graficos. Utiliza metodos Javascript 
predefinidos para operar. 

Drag and Drop Esta API hace que arrastrar y soltar elementos eon el ratón en la pantalla sea posible tambien en la web. 

Geolocation Esta API tiene la intención de proveer acceso a información correspondiente eon la ubicación fisica del 
dispositivo que esta accediendo a la aplicación. Puede retornar datos como la latitud y longitud utilizando diferentes 
mecanismos (como información de la red o GPS). 

Web Storage Esta API introduce dos atributos para almacenar datos en el ordenador del usuario: sessionStorage y 
localstorage. El atributo sessionStorage permite a los desarrolladores hacer un seguimiento de la actividad de 
los usuarios almacenando información que estara disponible en cada instancia de la aplicación durante la duración 
de la sesión. El atributo localstorage, por otro lado, ofrece a los desarrolladores un area de almacenamiento, 
creada para cada aplicación, que puede conservar varios megabytes de información, preservando de este modo 
información y datos en el ordenador del usuario de forma persistente. 

Indexed Database Esta API agrega la capacidad de trabajar eon bases de datos del lado del usuario. El sistema fue 
desarrollado independientemente de previas tecnologlas yprovee una base de datos destinada a aplicaciones web. 
La base de datos es almacenada en el ordenador del usuario, los datos son persistentes y, por supuesto, son 
exclusivos de la aplicación que los creó. 


Rle Este es un grupo de APls desarrollada para proveer la capacidad de leer, escribir y procesar archivos de usuario. 

XMLHttpRequest Level 2 Esta API es una mejora de la vieja XMLHttpRequest destinada a la construcción de 
aplicaciones Ajax. Incluye nuevos metodos para controlarel progreso de la operación y realizar solicitudes cruzadas 
(desde diferentes origenes). 

Cross Document Messaging Esta API introduce una nueva tecnologia de comunicación que permite a aplicaciones 
comunicarse entre si a traves de diferentes cuadros o ventanas. 

WebSockets Esta API provee un mecanismo de comunicación de dos vlas entre clientes y servidores para generar 
aplicaciones en tiempo real como salas de chato juegos en linea. 

Web Workers Esta API potencia Javascript permitiendo el procesamiento de código detras de escena, de forma 
separada del código principal, sin interrumpir la actividad normal de la pagina web, incorporando la capacidad de 
multitarea a este lenguaje. 

History Esta API provee la alternativa de incorporar cada paso en el proceso de una aplicación dentro del historial de 
navegación del navegador. 

Offline Esta API apunta a mantener las aplicaciones funcionales incluso cuando el dispositivo es desconectado de la 
red. 




Capitulo 5 
Video y audio 


5.1 Reproduciendo video eon HTML5 

Una de las caracterfsticas mas mencionadas de HTML5 fue la capacidad de procesar video. El entusiasmo nada tema que 
ver eon las nuevas herramientas provistas por HTML5 para este propósito, sino mas bien eon el hecho de que desde los 
videos se volvieron una pieza esencial de Internet, todos esperaban soporte nativo por parte de los navegadores. Era como 
que todos conocian la importancia de los videos excepto aquellos encargados de desarrollar las tecnologias para la web. 

Pero ahora que ya disponemos de soporte nativo para videos e incluso un estandar que nos permitira crear aplicaciones 
de procesamiento de video compatibles eon multiples navegadores, podemos comprender que la situación era mucho mas 
complicada de lo que nos habiamos imaginado. Desde codificadores hasta consumo de recursos, las razones para no 
implementar video de forma nativa en los navegadores eran mucho mas complejas que los códigos necesarios para hacerlo. 

A pesar de estas complicaciones, HTML5 finalmente introdujo un elemento para insertar y reproducir video en un 
documento HTML. El elemento <video> usa etiquetas de apertura y cierre y solo unos pocos parametros para lograr su 
función. La sintaxis es extremadamente sencilla y solo el atributo sre es obligatorio: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Reproductor de Video</title> 

</head> 

<body> 

<section id="reproductor"> 

<video src="http://minkbooks.com/content/trailer.mp4" controls> 
</video> 

</section> 

</body> 

</html> 


Listado 5-1. Sintaxis bśsica para el elemento <video>. 

En teoria, el código del Listado 5-1 deberia ser mas que suficiente. Repito, en teoria. Pero como explicamos 
anteriormente, las cosas se vuelven un poco mas complicadas en la vida real. Primero debemos proveer al menos dos 
archivos diferentes eon formatos de video diferentes: OGG yMP4. Esto es debido a que a pesar de que el elemento <video>y 
sus atributos son estandar, no existe un fermato estandar de video. Primero, algunos navegadores soportan un codificador de 
video que otros no, y segundo el codificador utilizado en el fermato MP4 (el unico soportado por importantes navegadores 
como Safari e Internet Explorer) se eneuentra bajo licencia comercial. 

Los formatos OGG y MP4 son contenedores de video y audio. OGG contiene codificadores de video Theora y de audio 
Vorbis, y los disponibles para el contenedor MP4 son H.264 para video y AAC para audio. En este momento OGG es 
reconocido por Firefox, Google Chrome y Opera, mientras que MP4 trabaja en Safari, Internet Explorer y tambien Google 
Chrome. 


El elemento <video> 


Intentemos ignorar por un momento estas complicaciones y disfrutar de la simplicidad del elemento <video>. Este elemento 
ofrece varios atributos para establecer su comportamiento y configuración. Los atributos width yheight, al igual que en 
otros elementos HTML ya conocidos, declaran las dimensiones para el elemento o ventana del reproductor. El tamafio del 
video sera automaticamente ajustado para entrar dentro de estos valores, pero no fueron considerados para redimensionar 
el video sino limitar el area ocupada por el mismo para mantener consistencia en el diseńo. El atributo sre especifica la 
fuente del video. Este atributo puede ser reemplazado por el elemento <source> y su propio atributo sre para declarar varias 
fuentes eon diferentes formatos, como en el siguiente ejemplo: 


<!DOCTYPE html> 
<html lang="es"> 



<head> 

<title>Reproductor de Video</title> 

</head> 

<body> 

<section id="reproductor"> 

<video id="medio" width="720" height="400" controls> 

<source src="http://minkbooks.com/content/trailer.mp4"> 
<source src="http://minkbooks.com/content/trailer.ogg"> 
</video> 

</section> 

</body> 

</html> 


Listado 5-2. Reproductor de video eon controles por defecto y compatible eon navegadores HTML5. 

En el Listado 5-2, el elemento <video> fue expandido. Ahora, dentro de las etiquetas del elemento hay dos elementos 
<source>. Estos nuevos elementos proveen diferentes fuentes de video para que los navegadores puedan elegir. El 
navegador leera la etiqueta <source> y decidira cual archivo reproducir de aeuerdo a los formatos soportados (MP4 u OGG). 

Hagalo usted mismo: Cree un nuevo archivo HTML vacio eon el nombrevideo.html (o cualquier otro nombre que 
desee), copie el código del Listado 5-2, yabra el archivo en diferentes navegadores para comprobarel modo en que el 
elemento <video> trabaja en cada uno de ellos. 


Atributos para <video> 


Incluimos un atributo en la etiqueta <video> en los Listados 5-1 y 5-2 que probablemente llamó su atención. El atributo 
Controls es uno de varios atributos disponibles para este elemento. Este, en particular, muestra controles de video 
provistos por el navegador por defecto. Cuando el atributo esta presente cada navegador activara su propia interface, 
permitiendo al usuario comenzar a reproducir el video, pausarlo o saltar hacia un cuadro especifico, entre otras funciones. 

Junto eon Controls, tambien podemos usar los siguientes: 

autoplay Cuando este atributo esta presente, el navegador comenzara a reproducir el video automaticamente tan pronto 
como pueda. 

loop Si este atributo es especificado, el navegador comenzara a reproducir el video nuevamente cuando llega al finał. 

poster Este atributo es utilizado para proveer una imagen que sera mostrada mientras esperamos que el video 
comience a ser reproducido. 

preload Este atributo puede recibir tres valores distintos: nonę, metadata o auto. El primero indica que el video no 
deberia ser cacheado, por lo generał eon el propósito de minimizar trafico innecesario. El segundo valor, metadata, 
recomendara al navegador que tratę de capturar información acerca de la fuente (por ejemplo, dimensiones, 
duración, primer cuadro, etc...). El tercer valor, auto, es el valor configurado por defecto que le sugerira al navegador 
descargar el archivo tan pronto como sea posible. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Reproductor de Video</title> 

</head> 

<body> 

<section id="reproductor"> 

<video id="medio" width="720" height="400" preload Controls 
loop poster="http://minkbooks.com/content/poster. jpg"> 
<source src="http://minkbooks.com/content/trailer.mp4"> 
<source src="http://minkbooks.com/content/trailer.ogg"> 
</video> 

</section> 

</body> 

</html> 


Listado 5-3: Aprovechando los atributos del elemento <video>. 


En el Listado 5-3, el elemento <video> fue poblado eon atributos. Debido a las diferencias en comportamiento entre un 



navegador y otro, algunos atributos estaran habilitados o deshabilitados pordefecto, yalgunos de ellos incluso no trabajaran 
en algunos navegadores o bajo determinadas circunstancias. Para obtener un control absoluto sobre el elemento <video> y 
el medio reproducido, deberemos programar nuestro propio reproductor de video en Javascript aprovechando los nuevos 
metodos, propiedades yeventos incorporados en HTML5. 



5.2 Programando un reproductor de video 


Si ha probado los anteriores códigos en diferentes navegadores, seguramente habra notado que los disenos graficos de los 
controles del reproductor difieren de uno a otro. Cada navegador tiene sus propios botones y barras de progreso, e incluso 
sus propias funciones. Esta situación puede ser aceptable en algunas circunstancias pero en un ambiente profesional, 
donde cada detalle cuenta, resulta absolutamente necesario que un diseno consistente sea preservado a traves de 
dispositivos y aplicaciones, ytambien disponer de un control absoluto sobre todo el proceso. 

HTML5 proporciona nuevos eventos, propiedades ymetodos para manipular video e integrarlo al documento. De ahora en 
mas, podremos crear nuestro propio reproductor de video y ofrecer las funciones que queremos usando HTML, CSS y 
Javascript. El video es ahora parte integral del documento. 


El diseno 


Todo reproductor de video necesita un panel de control eon al menos algunas funciones basicas. En la nueva plantilla del 
Listado 5-4, un elemento <nav> fue agregado luego de <video>. Este elemento <nav> contiene dos elementos <div> 
(botones ybarra) para ofrecer un botón “Reproducir” y una barra de progreso. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Reproductor de Video</title> 

<link rel="stylesheet" href="reproductor.css"> 

<script src="reproductor. js"X/script> 

</head> 

<body> 

<section id="reproductor"> 

<video id="medio" width="720" height="400"> 

<source src="http://minkbooks.com/content/trailer,mp4"> 
<source src="http://minkbooks.com/content/trailer.ogg"> 
</video> 

<nav> 

<div id="botones"> 

<button type="button" id="reproducir">Reproducir</button> 
</div> 

<div id="barra"> 

<div id="progreso"></div> 

</div> 

<div style="clear: both"X/div> 

</nav> 

</section> 

</body> 

</html> 


Listado 5-4. Plantilla HTML para nuestro reproductor de video. 

Ademas del video, esta plantilla tambien incluye dos archivos para acceder a códigos externos. Uno de ellos es 
player.css para los siguientes estilos CSS: 


body { 

text-align: center; 

} 

header, section, footer, aside, nav, article, figurę, figeaption, 

hgroupt 

display ; błock; 

} 

treproductor{ 
width: 720px; 
margin: 20px auto; 
padding: 5px; 



background: #999999; 
border: lpx solid #666666; 

-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 

} 

nav{ 

margin: 5px Opx; 


#botones{ 

float: left; 
width: 100px; 
height: 20px; 

} 

#barra{ 

position: relative; 
float: left; 
width: 600px; 
height: 16px; 
padding: 2px; 

border: lpx solid #CCCCCC; 
background: #EEEEEE; 

} 

#progreso{ 

position: absolute; 
width: Opx; 
height: 16px; 

background: rgba(0,0,150,.2); 


Listado 5-5. Estilos CSS para el reproductor. 

El código del Listado 5-5 usa tecnicas del Modelo de Caja Tradicional estudiado en el Capitulo 2 para crear la caja que 
contiene cada pieza del reproductor de video y ubicarla en el centro de la ventana. No hay nuevas propiedades o sorpresas en 
este código, es solo un grupo de propiedades CSS ya estudiadas y conocidas para proveer estilos a los elementos del 
reproductor. Sin embargo, existen dos propiedades que pueden resultar inusuales. La propiedad position, conocida por 
viejos programadores CSS, fue usada para superponer un elemento sobre otro (barra yprogreso). Y la propiedad width, 
para el elemento <div> identificado como progreso, fue inicializada en 0. Esto se debe a que el elemento sera utilizado para 
simular una barra de progreso que cambiara de tamańo a medida que el video es reproducido, y que, por supuesto, 
comenzara a crecer desde 0. 

Hagalo usted mismo: Copie la nueva plantilla del Listado 5-4 en el archivo HTML (video.html). Cree dos nuevos 
archivos vaclos para los estilos CSS y el código Javascript. Estos archivos deberlan ser llamados reproductor.css y 
reproductor. js respectivamente. Copie el código del Listado 5-5 dentro del archivo correspondiente yluego haga lo 
mismo para cada código Javascript listado de ahora en adelante. 


El código 


Es momento de escribirel código Javascript para nuestro reproductor. Existen diferentes formas de programarun reproductor 
de video, pero en este capftulo vamos solo a explicar como aplicar los necesarios eventos, metodos y propiedades para 
procesamiento basico de video. El resto quedara librado a su imaginación. 

Para nuestro propósito, vamos a trabajar eon unas pocas funciones simples que nos permitiran reproducir y pausar el 
video, mostraruna barra de progreso mientras el video es reproducido yofrecerla opción de hacer clic sobre esta barra para 
adelantaro retrocederel video. 


Los eventos 


HTML5 incorpora nuevos eventos que son especfficos de cadaAPI. Para el procesamiento de video yaudio, porejemplo, los 
eventos fueron incorporados eon el objetivo de informar sobre la situación del medio (el progreso de la descarga, si la 
reproducción del medio finalizó, o si la reproducción del medio es comenzada o pausada, entre otras). No vamos a utilizarlos 



en nuestros ejemplos pero seran necesarios para construir aplicaciones complejas. Estos son los mas relevantes: 

progress Este evento es disparado periódicamente para informar acerca del progreso de la descarga del medio. La 
información estara disponible a traves del atributo buffered, como veremos mas adelante. 

canplaythrough Este evento es disparado cuando el medio completo puede ser reproducido sin interrupción. El estado 
es establecido considerando la actual tasa de descarga yasumiendo que seguira siendo la misma durante el resto 
del proceso. Existe otro evento mas para este propósito, canplay, pero no considera toda la situación y es 
disparado tan pronto como algunas partes del medio se encuentran disponibles (luego de descargar los primeros 
cuadros de un video, porejemplo). 

ended Es disparado cuando el reproductor llega al finał del medio. 

pause Es disparado cuando el reproductor es pausado. 

play Es disparado cuando el medio comienza a ser reproducido. 

error Este evento es disparado cuando ocurre un error. Es relacionado eon el elemento <source> correspondiente a la 
fuente del medio que produjo el error. 

Para nuestro reproductor de ejemplo solo vamos a escuchara los habituales eventos clickyload. 

IMPORTANTE: Eventos, metodos y propiedades para APls estan aun en proceso de desarrollo. En este libro vamos a 
estudiar solo aquellos que consideramos relevantes e indispensables para nuestros ejemplos. Para ver como la 
especificación esta progresando eon respecto a esto, visite nuestro sitio web ysiga los enlaces correspondientes a 
cada capitulo. 


function iniciar() { 
maximo=600; 

medio=document.getElementByld('medio'); 
reproducir=document.getElementByld('reproducir'); 
barra=document.getElementByld('barra'); 
progreso=document.getElementByld('progreso'); 

reproducir.addEventListener('click', presionar, false); 
barra.addEventListener('click', mover, false); 


Listado 5-6. Función inicial. 

El Listado 5-6 presenta la primera función de nuestro reproductor de video. La función fue llamada iniciar debido a que 
sera la función que iniciara la ejecución de la aplicación tan pronto como el documento sea completamente cargado. 

Debido a que esta es la primera función a ser ejecutada, necesitamos definir unas variables globales para configurar 
nuestro reproductor. Usando el selector getElementByld creamos una referenda a cada uno de los elementos del 
reproductor para poder acceder a ellos en el resto del código mas adelante. Tambien declaramos la variable maximo para 
conocer siempre el maximo tamańo posible para la barra de progreso (600 pixeles). 

Hay dos acciones a las que tenemos que prestar atención desde el código: cuando el usuario hace clic sobre el botón 
“Reproducir” y cuando hace clic sobre la barra de progreso para avanzar o retroceder el video. Dos escuchas para el evento 
click fueron agregadas eon el propósito de controlar estas situaciones. Primero agregamos la escucha al elemento 
reproducir que ejecutara la función presionar () cada vez que el usuario haga clic sobre el botón “Reproducir”. La otrą 
escucha es para el elemento barra. En este caso, la función mover () sera ejecutada cada vezque el usuario haga clic sobre 
la barra de progreso. 


Los metodos 


La función presionar () incorporada en el Listado 5-7 es la primera función que realmente realiza una tarea. Esta función 
ejecutara de aeuerdo a la situación actual dos metodos especificos de esta API: play () ypause (): 


function presionar(){ 

if(Imedio.paused && !medio.ended) { 
medio.pause(); 

reproducir.innerHTML='Reproducir'; 
window.elearInterval(bucie); 



} else { 

medio.play() ; 

reproducir.innerHTML='Pausa'; 
bucle=setlnterval(estado, 1000); 

} 

} 


Listado 5-7. Esta función inicia y pausa la reproducción del video. 


Los metodos play () ypause() son parte de una lista de metodos incorporados por HTML5 para procesamiento de 
medios. Los siguientes son los mas relevantes: 

play() Este metodo comienza a reproducir el medio desde el inicio, a menos que el medio haya sido pausado 
previamente. 

pause()Este metodo pausa la reproducción. 

load()Este metodo carga el archivo del medio. Es util en aplicaciones dinamicas para cargarel medio anticipadamente. 


canPlayType(formato) Con este metodo podemos sabersi el fermato del archivo es soportado porel navegadoro no. 


Las propiedades 


La función presionar () tambien usa unas pocas propiedades para recabar información sobre el medio. Las siguientes son 
las mas relevantes: 

paused Esta propiedad retorna true (verdadero) si la reproducción del medio esta actualmente pausada o no a 
comenzado. 

ended Esta propiedad retorna true (verdadero) si la reproducción del medio ha finalizado porque se llegó al finał. 

duration Esta propiedad retorna la duración del medio en segundos. 

currentTime Esta es una propiedad que puede retornar o recibir un valor para informar sobre la posición en la cual el 
medio esta siendo reproducido o especifica una nueva posición donde continuar reproduciendo. 

error Esta propiedad retorna el valordel error ocurrido. 

buffered Esta propiedad ofrece información sobre la parte del archivo que ya fue cargada en el buffer. Nos permite crear 
un indicador para mostrar el progreso de la descarga. La propiedad es usualmente lelda cuando el evento 
Progress es disparado. Debido a que los usuarios pueden forzar al navegador a cargar el medio desde diferentes 
posiciones en la llnea de tiempo, la información retornada porbuffered es un array conteniendo cada parte del 
medio que ya fue descargada, no solo la que comienza desde el principio. Los elementos del array son accesibles 
por medio de los atributos end() y starto . Por ejemplo, el código buffered.end(O) retornara la duración en 
segundos de la primera porción del medio encontrada en el buffer. Esta propiedad y sus atributos estan bajo 
desarrollo en este momento. 


El código en operación 


Ahora que ya conocemos todos los elementos involucrados en el procesamiento de video, echemos un vistazo a como 
trabaja la función presionar (). 

Esta función es ejecutada cuando el usuario presiona el botón “Reproducir” en nuestro reproductor. Este botón tendra dos 
propósitos: mostrara el mensaje “Reproducir” para reproducir el video o “Pausa” para detenerlo, de acuerdo a las 
circunstancias. Por lo tanto, cuando el video fue pausado o no comenzó, presionar este botón comenzara o continuara la 
reproducción. Lo opuesto ocurrira si el video esta siendo reproducido, entonces presionar el botón pausara el video. 

Para lograr esto el código detecta la situación del medio comprobando el valor de las propiedades paused yended. En la 
primera llnea de la función tenemos un condicional if para este propósito. Si el valor de medio .paused ymedio. ended es 
falso, significara que el video esta siendo reproducido, entonces el metodo pause () es ejecutado para pausar el video yel 
texto del botón es cambiado a “Reproducir” usando innerHTML. 

Si lo opuesto ocurre, el video fue pausado previamente o terminó de ser reproducido, entonces la condición sera falsa 
(medio. paused o medio. ended es verdadero) y el metodo play() es ejecutado para comenzar o restaurar la reproducción 
del video. En este caso tambien realizamos una importante acción que es configurar un intervalo usando setinterval () 
para ejecutar la función estado () una vezpor segundo de ahora en mas. 



function estado(){ 
if(!medio.ended) { 

var total=parseInt(medio.currentTime*maximo/medio.duration); 
progreso.style.width=total+'px'; 

}else{ 

progreso.style.width='Opx'; 
reproducir.innerHTML='Reproducir'; 
window.elearInterval(bucie); 

} 

} 


Listado 5-8. Esta función actualiza la barra de progreso una vez por segundo. 

Lafunción estado() en el Listado 5-8 es ejecutada cada segundo mientras el video es reproducido. Tambien utilizamos 
un condicional if en esta función para controlar el estado del video. Si la propiedad ended retorna falso, calculamos que tan 
larga la barra de progreso debe ser en pixeles yasignamos el valoral elemento <div> que la representa. En caso de que la 
propiedad sea verdadera (lo cual significa que la reproducción del video ha terminado), retornamos el valor de la barra de 
progreso a 0 pixeles, cambiamos el botón a “Reproducir”, y cancelamos el intervalo usando clearinterval. En este caso la 
función estado () no sera ejecutada nunca mas. 

Volvamos unos pasos para estudiar como calculamos el tamańo de la barra de progreso. Debido a que la función 
estado () sera ejecutada cada segundo mientras el video se esta reproduciendo, el valor del tiempo en el que el video se 
eneuentra cambiara constantemente. Este valoren segundos es obtenido de la propiedad currentTime. Tambien contamos 
eon el valor de la duración del video en la propiedad duration, y el maximo tamańo de la barra de progreso en la variable 
maximo que definimos al principio. Con estos tres valores podemos calcular cuantos pixeles de largo la barra deberla ser 
para representar los segundos ya reproducidos. La formula tiempo actual x maximo / duración total trans form ara 
los segundos en pixeles para cambiar el tamańo del elemento <div> que representa la barra de progreso. 

La función para responder al evento click del elemento reproducir (el botón) ya fue creada. Ahora es tiempo de hacer 
lo mismo para responder a los clics hechos sobre la barra de progreso: 


function mover(e){ 

if(Imedio.paused && !medio.ended){ 
var ratonX=e.pageX-barra.offsetLeft; 
var nuevoTiempo=ratonX*medio.duration/maximo; 
medio.currentTime=nuevoTiempo; 
progreso.style.width=ratonX+'px'; 

} 

} 


Listado 5-9. Comenzar a reproducir desde la posición seleccionada porel usuario. 

Una escucha para el evento click fue agregada al elemento barra para responder cada vez que el usuario quiera 
comenzar a reproducir el video desde una nueva posición. La escucha usa la función mover () para responder al evento 
cuando es disparado. Puede ver esta función en el Listado 5-9. Comienza con un if, al igual que las anteriores funciones, 
pero esta vez el objetivo es controlar que la acción se realice solo cuando el video esta siendo reproducido. Si las 
propiedades paused y ended son falsas significa que el video esta siendo reproducido y el código tiene que ser ejecutado. 

Debemos hacer varias cosas para calcular el tiempo en el cual el video deberfa comenzar a ser reproducido. 
Necesitamos determinar cual era la posición del ratón cuando el clic sobre la barra fue realizado, cual es la distancia en 
pixeles desde esa posición hasta el comienzo de la barra de progreso y cuantos segundos esa distancia representa en la 
linea de tiempo. 

Los procesos para agregar una escucha (o registrar un evento), tales como addEventListener (), siempre envlan un 
valor que hacer referenda al evento. Esta referenda es enviada como un atributo a la función que responde al evento. 
Tradicionalmente la variable e es usada para almacenar este valor. En la función del Listado 5-9 usamos esta variable y la 
propiedad pagex para capturar la posición exacta del puntero del ratón al momento en el que el clic fue realizado. El valor 
retornado porpagexes relativo a la pagina, no a la barra de progreso o la ventana. Para saber cuantos pixeles hay desde el 
comienzo de la barra de progreso y la posición del puntero, tenemos que substraer el espacio entre el lado izquierdo de la 
pagina yel comienzo de la barra. Recuerde que la barra esta localizada en una caja que se eneuentra centrada en la ventana. 
Los valores dependeran de cada situación en particular, por lo tanto supongamos que la barra esta localizada a 421 pixeles 
del lado izquierdo de la pagina web yel clic fue realizado en el medio de la barra. Debido a que la barra tiene una longitud de 
600 pixeles, el clic fue hecho a 300 pixeles desde el comienzo de la barra. Sin embargo, la propiedad pagex no retornara el 



valor 300, sino 721. Para obtener la posición exacta en la barra donde el clic ocurrió, debemos substraer depagex la 
distancia desde el lado izquierdo de la pagina hasta el comienzo de la barra (en nuestro ejemplo, 421 pixeles). Esta distancia 
puede ser obtenida mediante la propiedad offsetLeft. Entonces, usando la formula e.pagex - barra.offsetLeft 
conseguimos exactamente la posición del puntero del ratón relativa al comienzo de la barra. En nuestro ejemplo, la formula 
en numeros seria: 721 - 421 = 300. 

Una vez obtenido este valor, debemos convertirlo a segundos. Usando la propiedad duration, la posición exacta del 
puntero del ratón en la barra yel tarnaho maximo de la barra construimos la formula ratonX x video.duration / maximo 
yalmacenamos el resultado dentro de la variable nuevoTiempo. Este resultado es el tiempo en segundos que la posición del 
puntero del ratón representa en la linea de tiempo. 

El siguiente paso es comenzar a reproducir el video desde la nueva posición. La propiedad currentTime, como ya 
mencionamos, retorna la posición actual del video en segundos pero tambien avanza o retrocede el video a un tiempo 
especifico si un nuevo valor le es asignado. Con el códigomedio.currentTime=nuevoTiempo movemos el video a la 
posición deseada. 

Lo unico que resta por hacer es cambiar el tamańo del elemento progreso para reflejar en pantalla la nueva situación. 
Utilizando el valor de la variable ratonX cambiamos el tamańo del elemento para alcanzar exactamente la posición done el 
clic fue hecho. 

El código para nuestro reproductor de video ya esta casi listo. Tenemos todos los eventos, metodos, propiedades y 
funciones que nuestra aplicación necesita. Solo hay una cosa mas que debemos hacer, un evento mas que debemos 
escuchar para poner nuestro código en marcha: 


window.addEventListener('load', iniciar, false); 


Listado 5-10. Escuchando al evento load. 

Podriamos haber usado la tecnica window.onload para registrar el manejador del evento, y de hecho hubiese sido la 
mejor opción para hacer nuestros códigos compatibles con viejos navegadores. Sin embargo, debido a que este libro es 
acerca de HTML5, decidimos usar el nuevo estandar addEventListener (). 

Hagalo usted mismo: Copie todos los códigos Javascript desde el Listado 5-6 dentro del archivo reproductor. js. 
Abra el archivo video.html con la plantilla del Listado 5-4 en su navegador y haga clic en el botón “Reproducir”. Intente 
utilizar la aplicación desde diferentes navegadores. 



5.3 Formatos de video 


Por el momento no existe un estandar para formatos de video y audio en la web. Existen varios contenedores y diferentes 
codificadores disponibles, pero ninguno fue totalmente adoptado y no hay consenso alguno de parte de los fabricantes de 
navegadores para lograrun estandar en el futuro cercano. 

Los contenedores mas comunes son OGG, MP4, FLV y el nuevo propuesto por Google, WEBM. Normalmente estos 
contenedores contienen video codificado eon los codificadores Theora, H.264, VP6 o VP8, respectivamente. Esta es la lista de 
los mas usados: 

• OGGcodificadorde video Theora yaudio Vorbis. 

• MP4 codificador de video H.264 yaudio AAC. 

• FLV codificador de video VP6 yaudio MP3. Tambien soporta H.264 yAAC. 

• WEBM codificador de video VP8 yaudio Vorbis. 

Los codificadores utilizados para OGG y WEBMson gratuitos, pero los utilizados para MP4 y FLVestan patentados, lo que 
significa que si queremos usar MP4 o FLVpara nuestras aplicaciones deberemos pagar. Algunas restricciones son anuladas 
para aplicaciones gratuitas. 

El tema es que en este momento Safari e Internet Explorer no soportan la tecnologia gratuita. Ambos solo trabajan eon 
MP4 y solo Internet Explorer anunció la inclusión del codificador VP8 en el futuro. Esta es la lista de los navegadores mas 
populares: 


• Firefox codificador de video Theora yaudio Vorbis. 

• Google Chrome codificador de video Theora y audio Vorbis. Tambien soporta codificador de video H.264 y audio 
AAC. 

• Opera codificador de video Theora yaudio Vorbis. 

• Safari codificador de video H.264 yaudio AAC. 

• Internet Explorer codificador de video H.264 yaudio AAC. 

Un mayor soporte para el fermato WEBM en el futuro podria mejorar la situación, pero probablemente no habra un fermato 
estandar por al menos los próximos dos o tres anos y tendremos que considerar diferentes alternativas de aeuerdo a la 
naturaleza de nuestra aplicación ynuestro negocio. 



5.4 Reproduciendo audio eon HTML5 


Audio no es un medio tan popular como video en Internet. Podemos filmar un video eon una camara personal que generara 
millones de vistas en sitios web como www.youtube.com, pero crear un archivo de audio que obtenga el mismo resultado es 
practicamente imposible. Sin Embargo, el audio se eneuentra aun disponible, ganando su propio mercado en shows de radio 
ypodcasts en toda la red. 

HTML5 provee un nuevo elemento para reproducir audio en un documento HTML. El elemento, porsupuesto, es <audio> 
ycom parte casi las mis mas caracteristicas del elemento <video>. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Reproductor de Audio</title> 

</head> 

<body> 

<section id="reproductor"> 

<audio src="http://minkbooks.com/content/beach.mp3" controls> 
</audio> 

</section> 

</body> 

</html> 


Listado 5-11. HTML basico para reproducir audio. 


El elemento <audio> 


El elemento <audio>trabaja del mismo modo ycomparte varios atributos eon el elemento <video>: 

sre Este atributo especifica la URL del archivo a ser reproducido. Al igual que en el elemento <video> normalmente 
sera reemplazado por el elemento <source> para ofrecer diferentes formatos de audio entre los que el navegador 
pueda elegir. 

Controls Este atributo activa la interface que cada navegador provee por defecto para controlar la reproducción del audio. 

autoplay Cuando este atributo esta presente, el audio comenzara a reproducirse automaticamente tan pronto como sea 
posible. 

loop Si este atributo es especificado, el navegador reproducira el audio una y otrą vezde forma automatica. 

preload Este atributo puede tomar tres valores diferentes: nonę, metadata o auto. El primero indica que el audio no 
deberia ser cacheado, normalmente eon el propósito de minimizar trafico innecesario. El segundo valor, metadata, 
recomendara al navegador obtener información sobre el medio (por ejemplo, la duración). El tercer valor, auto, es el 
valor configurado por defecto yle aconseja al navegador descargar el archivo tan pronto como sea posible. 

Una vez mas debemos hablar acerca de codificadores, y otrą vez debemos decir que el código en el Listado 5-11 deberia 
ser mas que suficiente para reproducir audio en nuestro documento, pero no lo es. MP3 esta bajo licencia comercial, por lo 
que no es soportado por navegadores como Firefox u Opera. Vbrbis (el codificador de audio del contenedor OGG) es 
soportado por esos navegadores, pero no por Safari e Internet Explorer. Por esta razón, nuevamente debemos aprovechar el 
elemento <source> para proveer al menos dos formatos entre los cuales el navegador pueda elegir: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Reproductor de Audio</title> 

</head> 

<body> 

<section id="reproductor"> 

<audio id="medio" controls> 

<source src="http://minkbooks.com/content/beach.mp3"> 
<source src="http://minkbooks.com/content/beach.ogg"> 
</audio> 



</section> 

</body> 

</html> 


Listado 5-12: dos fuentes para el mismo audio 

El código en el Listado 5-12 reproducira musica en todos los navegadores utilizando los controles por defecto. Aquellos 
que no puedan reproducir MP3 reproduciran OGG y viceversa. Recuerde que MP3, al igual que MP4 para video, tienen uso 
restringido por licencias comerciales, por lo que solo podemos usarlos en circunstancias especiales, de acuerdo eon lo 
determinado porcada licencia. 

El soporte para los codificadores de audio libres y gratuitos (como N/orbis) se esta expandiendo, pero llevara tiempo 
transformar este fermato desconocido en un estandar. 



5.5 Programando un reproductor de audio 


La API para medios fue desarrollada tanto para video como para audio. Cada evento, metodo y propiedad incorporada para 
video funcionara tambien eon audio. Debido a esto, solo necesitamos reemplazar el elemento <video> por el elemento 
<audio> en nuestra plantilla e instantaneamente obtenemos un reproductor de audio: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Reproductor de Audio</title> 

<link rel="stylesheet" href="reproductor.css"> 

<script src="reproductor. j s"X/script> 

</head> 

<body> 

<section id="reproductor"> 

<audio id="medio"> 

<source src="http://minkbooks.com/content/beach.mp3"> 
<source src="http://minkbooks.com/content/beach.ogg"> 
</audio> 

<nav> 

<div id="botones"> 

<button type="button" id="reproducir">Reproducir</button> 
</div> 

<div id="barra"> 

<div id="progreso"x/div> 

</div> 

<div style="clear: both"x/div> 

</nav> 

</section> 

</body> 

</html> 


Listado 5-13. Plantilla para el reproductor de audio. 

En la nueva plantilla del listado 5-13, solo incorporamos un elemento <audio>ysus fuentes correspondientes, dejando el 
resto del código intacto, incluyendo los archivos externos. No necesitamos cambiar nada mas, los eventos, metodos y 
propiedades son los mismos para los dos medios (audio yvideo). 

Hagalo usted mismo: Cree un nuevo archivo llarnadoaudio.html, copie el código del Listado 5-13 dentro de este 
archivo y abralo en su navegador. Use los mismos archivos reproductor.css y reproductor. js creados 
anteriormente para hacerfuncionarsu reproductor de audio. 



5.6 Referenda rapida 


Video y audio son parte esencial de la web. HTML5 incorpora todos los elementos necesarios para aprovechar estas 
herramientas yutilizarlas en nuestras aplicaciones web. 


Elementos 


HTML5 provee dos nuevos elementos HTML para procesar medios y una API especifica para acceder a la libreria de medios. 
<video> Este elemento nos permite insertar un archivo de video en un documento HTML. 

<audio> Este elemento nos permite insertar un archivo de audio en un documento HTML. 


Atributos 


La especificación tambien provee atributos para los elementos <video> y <audio>: 

src Este atributo declara la URL del medio a ser incluido en el documento. Puede usar el elemento <source> para 
proveer mas de una fuente y dejar que el navegador elija cual reproducir. 

Controls Este atributo, si esta presente, activa los controles por defecto. Cada navegador provee sus propias funciones, 
como botones para reproducir ypausarel medio, asi como barra de progreso, entre otras. 

autoplay Este atributo, si esta presente, le indicara al navegador que comience a reproducir el medio lo mas pronto 
posible. 

loop Este atributo hara que el navegador reproduzca el medio indefinidamente. 

preload Este atributo recomienda al navegador que hacer eon el medio. Puede recibir tres valores diferentes: nonę, 
metadata y auto. El valornone le dice al navegadorque no descargue el archivo hasta que el usuario lo ordene. El 
vaIor metadata le recomienda al navegador descargar información basica sobre el medio. El valorauto le dice al 
navegador que comience a descargar el archivo tan pronto como sea posible. 


Atributos de video 


Existen algunos atributos que son especificos para el elemento <video>: 

poster Este atributo provee una imagen para mostrarla en lugardel video antes de ser reproducido. 
width Este atributo determina el tamaho del video en pixeles. 
height Este atributo determina el tamaho del video en pixeles. 


Eventos 


Los eventos mas relevantes para esta API son: 

progress Este evento es disparado periódicamente para informarel progreso en la descarga del medio. 

canplaythrough Este evento es disparado cuando el medio completo puede ser reproducido sin interrupción. 

canplay Este evento es disparado cuando el medio puede ser reproducido. Adiferencia del evento previo, este es 
disparado cuando solo parte del archivo fue descargado (solo los primeros cuadros de un video, por ejemplo). 

ended Este evento es disparado cuando la reproducción llega al finał del medio. 

pause Este evento es disparado cuando la reproducción es pausada. 

play Este evento es disparado cuando el medio comienza a ser reproducido. 

error Este evento es disparado cuando ocurre un error. El evento es despachado desde el elemento <source> (si se 
eneuentra presente) correspondiente a la fuente del medio que produjo el error. 



Metodos 


Los metodos mas comunes para esta API son: 

play() Este metodo comienza o continua la reproducción del medio. 
pause() Este metodo pausa la reproducción del medio. 

load() Este metodo descarga el archivo del medio. Es util en aplicaciones dinamicas. 

canPlayType(formato) Este metodo indica si el formato del archivo que queremos utilizar es soportado por el 
navegador o no. Retorna una cadena vacia si el navegador no puede reproducir el medio y los textos “maybe” 
(quizas) o “probably” (probablemente) basado en la confianza que tiene de que el medio pueda ser reproducido o 
no. 


Propiedades 


Las propiedades mas comunes de esta API son: 

paused Esta propiedad retorna true (verdadero) si la reproducción del medio se encuentra pausada o no ha 
comenzado. 

ended Esta propiedad retorna true (verdadero) si la reproducción llegó al finał del medio. 

duration Esta propiedad retorna la duración del medio en segundos. 

currentTime Esta es una propiedad que puede retornar o recibir un valor para informar la posición en la cual el medio 
se encuentra reproduciendo o establecer una nueva posición donde comenzar a reproducir. 

error Esta propiedad retorna el valordel errorcuando un errorocurre. 

buffered Esta propiedad ofrece información sobre la cantidad del archivo que fue descargado e introducido en el buffer. 
Retorna un array conteniendo datos sobre cada porción del medio que ha sido descargada. Si el usuario salta a otrą 
parte del medio que no ha sido aun descargada, el navegador comenzara a descargar el medio desde ese punto, 
generando una nueva porción en el buffer. Los elementos del array son accesibles por medio de los atributos end() 
y start(). Porejemplo, el código buffered.end(O) retornara la duración en segundos de la primera porción del 
medio encontrada en el buffer. 




Capitulo 6 
Formularios y API Forms 


6.1 Formularios Web 


La Web 2.0 esta completamente enfocada en el usuario. Ycuando el usuario es el centro de atención, todo esta relacionado 
eon interfaces, en como hacerlas mas intuitivas, mas naturales, mas practicas, y por supuesto mas atractivas. Los 
formularios web son la interface mas importante de todas, permiten a los usuarios insertar datos, tomar decisiones, 
comunicar información ycambiarel comportamiento de una aplicación. Durante los ultimos anos, códigos personalizados y 
librerias fueron creados para procesar formularios en el ordenador del usuario. HTML5 vuelve a estas funciones estandar 
agregando nuevos atributos, elementos y una API compieta. Ahora la capacidad de procesamiento de información insertada 
en formularios en tiempo real ha sido incorporada en los navegadores ycompletamente estandarizada. 


El elemento <form> 


Los formularios en HTML no han cambiado mucho. La estructura sigue siendo la misma, pero HTML5 ha agregado nuevos 
elementos, tipos de campo y atributos para expandirlos tanto como sea necesario y proveer asi las funciones actualmente 
implementadas en aplicaciones web. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Formularios</title> 

</head> 

<body> 

<section> 

<form name="miformulario" id="miformulario" method="get"> 
<input type="text" name="nombre" id="nombre"> 

<input type="submit" value="Enviar"> 

</form> 

</section> 

</body> 

</html> 


Listado 6-1. Estructura norma! de un formulario. 

En el Listado 6-1 creamos una plantilla basica para formularios. Como puede ver, la estructura del formulario y sus 
atributos siguen siendo igual que en especificaciones previas. Sin embargo, existen nuevos atributos para el elemento 
<form>: 

autocomplete Este es un viejo atributo que se ha vuelto estandar en esta especificación. Puede tomar dos valores: on y 
off. El valor por defecto es on. Cuando es configurado como off los elementos <input> pertenecientes a ese 
formulario tendran la función de autocompletar desactivada, sin mostrar entradas previas como posibles valores. 
Puede ser implementado en el elemento <form> o en cualquier elemento <input> independientemente. 

novalidate Una de las caracteristicas de formularios en HTML5 es la capacidad propia de validación. Los formularios 
son automaticamente validados. Para evitar este comportamiento, podemos usar el atributo novalidate. Para 
lograr lo mismo para elementos <input> especificos, existe otro atributo llamado formnovalidate. Ambos 
atributos son booleanos, ningun yalortiene que serespecificado (su presencia es suficiente para activarsu función). 


El elemento <input> 


El elemento mas importante en un formulario es <input>. Este elemento puede cambiar sus caracteristicas gracias al 
atributo type (tipo). Este atributo determina que clase de entrada es esperada desde el usuario. Los tipos disponibles hasta 
el momento eran el multipropósitos text (para textos en generał) y solo unos pocos mas especificos comopassword o 
submit. HTML5 ha expandido las opciones inerementando de este modo las posibilidades para este elemento. 



En HTML5 estos nuevos tipos no solo estan especificando que clase de entrada es esperada sino tambien diciendole al 
navegador que debe hacer eon la información recibida. El navegador procesara los datos ingresados de aeuerdo al valor del 
atributo type y validara la entrada o no. 

El atributo type trabaja junto eon otros atributos adicionales para ayudaral navegadora limitar y controlar en tiempo real lo 
ingresado porel usuario. 

Hagalo usted mismo: Cree un nuevo archivo HTML eon la plantilla del Listado 6-1. Para comprobar como funciona cada 
tipo de campo estudiado de aquf en adelante, reemplace los elementos <input> en la plantilla por aquellos que quiere 
probar y abra nuevamente el archivo en su navegador. En este momento la forma en la que los tipos de campo son 
tratados varla, por este motivo le recomendamos probar el código en cada navegador disponible. 


Tipo email 


Casi todo formulario en la web ofrece un campo para ingresar una dirección de email, pero hasta ahora el unico tipo de 
campo disponible para esta clase de datos era text. El tipo text representa un texto generał, no un dato especlfico, por lo 
que tenfamos que controlar la entrada eon código Javascript para estar seguros de que el texto ingresado correspondia a un 
email valido. Ahora el navegador se hace cargo de esto eon el nuevo tipo email: 


Cinput type="email" name="miemail" id="miemail"> 


Listado 6-2. El tipo eman. 

El texto insertado en el campo generado porel código del Listado 6-2 sera controlado porel navegadoryvalidado como un 
email. Si la validación fa11a, el formulario no sera enviado. 

Como cada navegador respondera a una entrada invalida no esta determinado en la especificación de HTML5. Por 
ejemplo, algunos navegadores mostraran un borde rojo alrededor del elemento <input> que produjo el error y otros lo 
mostraran en azul. Existen formas de personalizar esta respuesta, pero las veremos mas adelante. 


Tipo search 

El tipo search (busqueda) no controla la entrada, es solo una indicación para los navegadores. Al detectar este tipo de 
campo algunos navegadores cambiaran el diseho del elemento para ofreceral usuario un indicio de su propósito. 


cinput type="search" name="busqueda" id="busqueda"> 


Listado 6-3. El tipo search. 


Tipo url 


Este tipo de campo trabaja exactamente igual que el tipo email pero es especlfico para direcciones web. Esta destinado a 
recibirsolo URLs absolutas yretornara un errorsi el valores invalido. 


Cinput type="url" name="miurl" id="miurl"> 


Listado 6-4. El tipo vz i. 


Tipo tel 


Este tipo de campo es para numeros telefónicos. A diferencia de los tipos email yurl, el tipo tel no requiere ninguna 
sintaxis en particular. Es solo una indicación para el navegador en caso de que necesite hacer ajustes de aeuerdo al 
dispositivo en el que la aplicación es ejecutada. 



cinput type="tel" name="telefono" id="telefono"> 


Listado 6-5. El tipo tei. 


Tipo number 


Como su nombre lo indica, el tipo number es solo valido cuando recibe una entrada numerica. Existen algunos atributos 
nuevos que pueden ser utiles para este campo: 

min El valorde este atributo determina el minimo valor aceptado para el campo. 

max El valorde este atributo determina el maximo valor aceptado para el campo. 

step El valor de este atributo determina el tamano en el que el valor sera incrementado o disminuido en cada paso. Por 
ejemplo, si declara un valor de 5 para step en un campo que tiene un valor mfnimo de 0 y maximo de 10, el 
navegadorno le permitira especificar valores entre 0 y5 o entre 5 ylO. 


<input type="number" name="numero" id="numero" min="0" max="10" 

step="5"> 


Listado 6-6. El tipo number. 

No es necesario especificar ambos atributos (min ymax), y el valor por defecto para step es 1. 


Tipo rangę 


Este tipo de campo hace que el navegador construya una nueva clase de control que no existia previamente. Este nuevo 
control le permite al usuario seleccionar un valor a partir de una serie de valores o rango. Normalmente es mostrado en 
pantalla como una puntero deslizable o un campo eon flechas para seleccionar un valor entre los predeterminados, pero no 
existe un diseńo estandar hasta el momento. 

El tipo rangę usa los atributos min ymax estudiados previamente para configurar los llmites del rango. Tambien puede 
utilizar el atributo step para establecer el tamafio en el cual el valor del campo sera incrementado o disminuido en cada 
paso. 


Cinput type="range" name="numero" id="numero" min="0" max="10" 

step="5"> 


Listado 6-7. El tipo rangę. 

Podemos declarar el valor inicial utilizando el viejo atributo value y usar Javascript para mostrar el numero seleccionado 
en pantalla como referenda. Experimentaremos eon esto y el nuevo elemento <output> mas adelante. 


Tipo datę 


Este es otro tipo de campo que genera una nueva clase de control. En este caso fue incluido para ofrecer una mejor forma de 
ingresaruna fecha. Algunos navegadores muestran en pantalla un calendario que aparece cada vezque el usuario hace clic 
sobre el campo. El calendario le permite al usuario seleccionar un dla que sera ingresado en el campo junto eon el resto de 
la fecha. Un ejemplo de uso es cuando necesitamos proporcionar un metodo para seleccionar una fecha para un vuelo o la 
entrada a un espectaculo. Gracias al tipo datę ahora es el navegador el que se encarga de construir un almanaque o las 
herramientas necesarias para facilitar el ingreso de este tipo de datos. 


cinput type="date" name="fecha" id="fecha"> 


Listado 6-8. El tipo datę. 



La interface no fue declarada en la especificación. Cada navegador provee su propia interface y a veces adaptan el diseńo 
al dispositivo en el cual la aplicación esta siendo ejecutada. Normalmente el valor generado y esperado tiene la sintaxis ańo- 
mes-dia. 


Tipo week 


Este tipo de campo ofrece una interface similar a datę, pero solo para seleccionar una semana completa. Normalmente el 
valor esperado tiene la sintaxis 2011-W50 donde 2011 es al ano y50 es el numero de la semana. 


cinput type="week" name="semana" id="semana"> 


Listado 6-9. El tipo „eek. 


Tipo month 


Similar al tipo de campo previo, este es especifico para seleccionar meses. Normalmente el valor esperado tiene la sintaxis 
ano-mes. 


Cinput type="month" name="mes" id="mes"> 


Listado 6-10. El tipo month. 


Tipo time 

El tipo de campo time es similar a datę, pero solo para la hora. Toma el formato de horas y minutos, pero su 
comportamiento depende de cada navegador en este momento. Normalmente el valor esperado tiene la sintaxis 
hora:minutos : segundos, pero tam bien puedesersolo hora:minutos. 


Cinput type="time" name="hora" id="hora"> 


Listado 6-11. El tipo time. 


Tipo datetime 


El tipo de campo datetime es para ingresarfecha y hora completa, incluyendo la zona horaria. 


cinput type="datetime" name="fechahora" id="fechahora"> 


Listado 6-12. El tipo datetime. 


Tipo datetime-local 


El tipo de campo datetime-local es como el tipo datetime sin la zona horaria. 


cinput type="datetime-local" name="tiempolocal" id="tiempolocal"> 


Listado 6-13. El tipo datetime-local. 



Tipo color 


Ademas de los tipos de campo para fecha y hora existe otro tipo que provee una interface predefinida similar para seleccionar 
colores. Normalmente el valor esperado para este campo es un numero hexadecimal, como #00FF00. 


<input type="color" name="micolor" id="micolor"> 

Listado 6-14. El tipo color. 

Ninguna interface fue especificada como estandar en FITML5 para el tipo de campo color, pero es posible que una grilla 
eon un conjunto basico de colores sea adoptada e incorporada en los navegadores. 



6.2 Nuevos atributos 


Algunos tipos de campo requieren de la ayuda de atributos, como los anteriormente estudiados min, max ystep. Otros tipos 
de campo requieren la asistencia de atributos para mejorar su rendimiento o determinar su importancia en el proceso de 
validación. Ya vimos algunos de ellos, como novalidate para evitar que el formulario completo sea validado o 
formnovalidate para hacer lo mismo eon elementos individuales. El atributo autocomplete, tambien estudiado 
anteriormente, provee medidas de seguridad adicionales para el formulario completo o elementos individuales. Aunque 
utiles.estos atributos no son los unicos incorporados porHTML5. Es momento de estudiar el resto. 


Atributo placeholder 


Especialmente en tipos de campo search, pero tambien en entradas de texto normales, el atributo placeholder representa 
una sugerencia corta, una palabra o frase provista para ayudar al usuario a ingresar la información correcta. El valor de este 
atributo es presentado en pantalla por los navegadores dentro del campo, como una marca de agua que desaparece cuando 
el elemento es enfocado. 


cinput type="search" name="busqueda" id="busqueda" placeholder="escriba su busqueda"> 


Listado 6-15. El atributo placeholder. 


Atributo required 


Este atributo booleano no dejara que el formulario sea enviado si el campo se eneuentra vacfo. Porejemplo, cuando usamos 
el tipo email para recibir una dirección de email, el navegador comprueba si la entrada es un email valido o no, pero validara 
la entrada si el campo esta vacio. Cuando el atributo reąuired es incluido, la entrada sera valida solo si se cumplen las dos 
condiciones: que el campo no este vacio y que el valor ingresado este de aeuerdo eon los reguisitos del tipo de campo. 


Cinput type="email" name="miemail" id="miemail" required> 


Listado 6-16. El campo eman ahora es un campo requerido. 


Atributo multiple 

El atributo multiple es otro atributo booleano que puede ser usado en algunos tipos de campo (por ejemplo, email o file) 
para permitirel ingreso de entradas multiples en el mismo campo. 

Los valores insertados deben estar separados por coma para ser validos. 


Cinput type="email" name="miemail" id="miemail" multiple> 

Listado 6-17. El campo eman acepta multiples valores separados por coma. 

El código en el Listado 6-17 permite la inserción de multiples valores separados por coma, y cada uno de ellos sera 
validado por el navegador como una dirección de email. 

Atributo autofocus 


Esta es una función que muchos desarrolladores aplicaban anteriormente utilizando el metodo focus() de Javascript. Este 
metodo era efectivo pero forzaba el foco sobre el elemento seleccionado, incluso cuando el usuario ya se encontraba 
posicionado en otro diferente. Este comportamiento era irritante pero dificil de evitar hasta ahora. 

El atributo autofocus enfocara la pagina web sobre el elemento seleccionado pero considerando la situación actual. No 



movera el foco cuando ya haya sido establecido porel usuario sobre otro elemento. 


Cinput type="search" name="busqueda" id="busqueda" autofocus> 


Listado 6-18. El atributo autofocus aplicado sobre un campo de busqueda. 


Atributo pattern 

El atributo pattern es para propósitos de validación. Usa expresiones regulares para personalizar reglas de validación. 
Algunos de los tipos de campo ya estudiados vaIidan cadenas de texto especlficas, pero no permiten hacer validaciones 
personalizadas, como por ejemplo un código postał que consiste en 5 numeros. No existe ningun tipo de campo 
predeterminado para esta clase de entrada. 

El atributo pattern nos permite crear nuestro propio tipo de campo para controlar esta clase de valores no ordinarios. 
Puede incluso incluir un atributo title para personalizar mensajes de error. 


Cinput pattern="[0-9]{5}" name="codigopostal" id="codigopostal" 
title="inserte los 5 numeros de su código postal"> 


Listado 6-19. Tipos personalizados usando el atributo pattern. 

IMPORTANTE: Expresiones regulares son un tema complejo y no relacionado directamente eon HTML5. Para obtener 
información adicional al respecto, visite nuestro sitio web ysiga los enlaces correspondientes a este capitulo. 

Atributo form 

El atributo form es una adición util que nos permite declarar elementos para un formulario fuera del ambito de las etiquetas 
<form>. Hasta ahora, para construir un formulario tenlamos que escribir las etiquetas <form> de apertura y cierre y luego 
declarar cada elemento del formulario entre ellas. En HTML5 podemos insertar los elementos en cualquier parte del código y 
luego hacer referenda al formulario que pertenecen usando su nombre y el atributo form: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Formularios</title> 

</head> 

<body> 

<nav> 

Cinput type="search" name="busqueda" id="busqueda" 

form="formulario"> 

</nav> 

<section> 

cform name="formulario" id="formulario" method="get"> 
Cinput type="text" name="nombre" id="nombre"> 

Cinput type="submit" value="Enviar"> 

C/form> 

c/section> 

c/body> 

C/html> 


Listado 6-20. Declarando elementos del formulario en cualquierparte. 



6.3 Nuevos elementos para formularios 


Ya hemos visto los nuevos tipos de campos disponibles en HTML5, por lo tanto es momento de estudiar los nuevos 
elementos HTML incorporados eon la intención de mejorar o expandir las posibilidades de los formularios. 


El elemento <datalist> 


El elemento <datalist> es un elemento especifico de formularios usado para construir una lista de Items que luego, eon la 
ayuda del atributo list, sera usada como sugerencia en un campo del formulario. 


<datalist id="informacion"> 

Coption value="123123123" label="Telefono 1"> 
<option value="456456456" label="Telefono 2"> 
</datalist> 


Listado 6-21. Construyendo la lista. 

Este elemento utiliza el elemento <option> en su interior para crear la lista de datos a sugerir. Con la lista ya declarada, 
lo unico que resta es referenciarla desde un elemento <input> usando el atributo list: 


Cinput type="tel" name="telefono" id="telefono" list="informacion"> 

Listado 6-22. Ofreciendo una lista de sugerencias con el atributo ust. 

El elemento en el Listado 6-22 mostrara posibles valores para que el usuario elija. 

IMPORTANTE: El elemento <datalist>fue solo implementado en Opera y FirefoxBeta en este momento. 

El elemento <progress> 


Este elemento no es especifico de formularios, pero debido a que representa el progreso en la realización de una tarea, y 
usualmente estas tareas son comenzadas y procesadas a traves de formularios, puede ser incluido dentro del grupo de 
elementos para formularios. 

El elemento <progress> utiliza dos atributos para configurar su estado y limites. El atributo value indica que parte de la 
tarea ya ha sido procesada, ymax declara el valor a alcanzar para que la tarea se considere finalizada. Vhmos a usar 
<progress> en futuros ejemplos. 


El elemento <meter> 


Similar a <progress>, el elemento <meter> es usado para mostrar una escala, pero no de progreso. Este elemento tiene la 
intención de representar una medida, como el trafico del sitio web, por ejemplo. 

El elemento <meter> cuenta con varios atributos asociados: min ymax configuran los limites de la escala, value 
determina el valor medido, y Iow, high y optimum son usados para segmentar la escala en secciones diferenciadas y marcar 
la posición que es optima. 


El elemento <output> 


Este elemento representa el resultado de un calculo. Normalmente ayudara a mostrar los resultados del procesamiento de 
valores provistos por un formulario. El atributo for asocia el elemento <output> con el elemento fuente que participa del 
calculo, pero este elemento debera ser referenciado y modificado desde código Javascript. Su sintaxis es 
<output>valor</output>. 



6.4 API Forms 


Seguramente no le sorprendera saber que, al igual que cada uno de los aspectos de HTML5, los formularios HTML cuentan 
eon su propia API para personalizartodos los aspectos de procesamiento yvalidación. 

Existen diferentes formas de aprovechar el proceso de validación en HTML5. Podemos usar los tipos de campo para 
activar el proceso de validación por defecto (por ejemplo, email) o volver un tipo de campo regular como text (o cualquier 
otro) en un campo requerido usando el atributo reąuired. Tambien podemos crear tipos de campo especiales usando 
pattern para personalizar requisitos de validación. Sin embargo, cuando se trata de aplicar mecanismos complejos de 
validación (por ejemplo, combinando campos o comprobando los resultados de un calculo) deberemos recurrir a nuevos 
recursos provistos porestaAPI. 


setCustomValidity() 


Los navegadores que soportan HTML5 muestran un mensaje de error cuando el usuario intenta enviar un formulario que 
contiene un campo invalido. 

Podemos crear mensajes para nuestros propios requisitos de validación usando el metodo 

setCustomValidity(mensaje). 

Con este metodo especificamos un error personalizado que mostrara un mensaje cuando el formulario es enviado. 
Cuando un mensaje vacio es declarado, el error es anulado. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Formularios</title> 

<script> 

function iniciar(){ 

nombrel=document.getElementByld("nombre"); 
nombre2=document.getElementByld("apellido"); 
nombrel.addEventListener("input", validacion, false); 
nombre2.addEventListener("input", validacion, false); 
validacion(); 

} 

function validacion(){ 

if(nombrel.value=='' && nombre2.value==''){ 

nombrel.setCustomValidity('inserte al menos un nombre'); 
nombrel.style.background='#FFDDDD' ; 

}else{ 

nombrel.setCustomValidity(' ') ; 
nombrel.style.background='#FFFFFF'; 

} 

} 

window.addEventListener("load", iniciar, false); 

</script> 

</head> 

<body> 

<section> 

<form name="registracion" method="get"> 

Nombre: 

Cinput type="text" name="nombre" id="nombre"> 

Apellido: 

<input type="text" name="apellido" id="apellido"> 

Cinput type="submit" id="send" value="ingresar"> 

</form> 

</section> 

</body> 

</html> 


Listado 6-23. Declarando errores personalizados. 



El código del Listado 6-23 presenta una situación de validación compleja. Dos campos fueron creados para recibir el 
nombre yapellido del usuario. Sin embargo, el formulario solo sera invalido cuando ambos campos se encuentran vacios. El 
usuario necesita ingresar solo uno de los campos, su nombre o su apellido, para validar la entrada. 

En casos como este no es posible usar el atributo required debido a que no sabemos cual campo el usuario decidira 
utilizar. Solo eon código Javascript y errores personalizados podremos crear un efectivo mecanismo de validación para este 
escenario. 

Nuestro código comienza a funcionar cuando el evento load es disparado. La función iniciar () es llamada para 
responder al evento. Esta función crea referencias para los dos elementos <input> y agrega una escucha para el evento 
input en ambos. Estas escuchas llamaran a la función validacion () cada vez que el usuario escribe dentro de los 
campos. 

Debido a que los elementos <input> se encuentran vaclos cuando el documento es cargado, debemos declarar una 
condición invalida para no permitir que el usuario envie el formulario antes de ingresar al menos uno de los valores. Por esta 
razón la función validacion () es llamada al comienzo. Si ambos campos estan vacios el errores generado y el color de 
fondo del campo nombre es cambiado a rojo. Sin embargo, si esta condición ya no es verdad porque al menos uno de los 
campos fue completado, el error es anulado y el color del fondo de nombre es nuevamente establecido como blanco. 

Es importante tener presente que el unico cambio producido durante el procesamiento es la modificación del color de 
fondo del campo. El mensaje declarado para el error eon setCustomValidity () sera visible solo cuando el usuario intente 
enviar el formulario. 

Hagalo usted mismo: Para propósitos de prueba, incluimos el código Javascript dentro del documento. Como 
resultado, lo unico que debe hacer para ejecutar este ejemplo es copiar el código del Listado 6-23 dentro de un archivo 
HTML vacio yabrirel archivo en su navegador. 

IMPORTANTE: API Forms esta siendo desarrollada en este momento. Depen-diendo del nivel al que la tecnologla haya 
sido adoptada en el momento en el que usted lee estas lineas es probable que necesite probar los códigos de este 
capitulo en diferentes navegadores para comprobarsu correcto funcionamiento. 


El evento invalid 


Cada vezque el usuario envfa el formulario, un evento es disparado si un campo invalido es detectado. El evento es llamado 
invalid y es disparado por el elemento que produce el error. Podemos agregar una escucha para este evento y asi ofrecer 
una respuesta personalizada, como en el siguiente ejemplo: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Formularios</title> 

<script> 

function iniciar(){ 

edad=document.getElementByld("miedad"); 

edad.addEventListener("change", cambiarrango, false); 

document.informacion.addEventListener("invalid", 

validacion, true); 

document.getElementByld("enviar").addEventListener("click", 

enviar, false); 


function cambiarrango(){ 

var salida=document.getElementByld("rango"); 
var calc=edad.value-20; 
if (calc<20){ 
calc=0; 

edad.value=20; 


} 

salida.innerHTML=calc+' a 'tedad.value; 


} 

function validacion(e){ 
var elemento=e.target; 
elemento.style.background='#FFDDDD' ; 

} 

function enviar(){ 

var valido=document.informacion.checkYalidity() ; 



if(valido){ 

document.informacion.submit(); 

} 

} 

window.addEventListener("load", iniciar, false); 

</script> 

</head> 

<body> 

<section> 

<form name="informacion" method="get"> 

Usuario: 

<input pattern="[A-Za-z]{3,}" name="usuario" id="usuario" 

maxlength="10" required> 

Email: 

<input type="email" name="miemail" id="miemail" required> 
Rango de Edad: 

cinput type="range" name="miedad" id="miedad" min="0" 

max="80" step="20" value="20"> 
<output id="rango">0 a 20</output> 

<input type="button" id="enviar" value="ingresar"> 

</form> 

</section> 

</body> 

</html> 


Listado 6-24. Nuestro propio sistema de validación. 

En el Listado 6-24, creamos un nuevo formulario eon tres campos para ingresar el nombre de usuario, un email y un 
rango de 20 ańos de edad. 

El campo usuario tiene tres atributos para validación: el atributo pattern solo admite el ingreso de un texto de tres 
caracteres rmnimo, desde la Aa la Z (mayusculas o minusculas), el atributo maxlength limita la entrada a 10 caracteres 
maximo, y el atributo required invalida el campo si esta vaclo. El campo miemail cuenta eon sus limitaciones naturales 
debido a su tipo y ademas no podrą enviarse vacio gracias al atributo reąuired. El campo miedad usa los atributos min, max, 
step y value para configurar las condiciones del rango. 

Tambien declaramos un elemento <output> para mostrar en pantalla una referenda del rango seleccionado. 

Lo que el código Javascript hace eon este formulario es simple: cuando el usuario hace clic en el botón “ingresar”, un 
evento invalid sera disparado desde cada campo invalido y el color de fondo de esos campos sera cambiado a rojo por la 
función validacion(). 

Veamos este procedimiento eon un poco mas de detalle. El código comienza a funcionar cuando el tfpico evento load es 
disparado luego que el documento fue completamente cargado. La función iniciar () es ejecutada y tres escuchas son 
agregadas para los eventos change, invalid y click. 

Cada vez que el contenido de los elementos del formulario cambia por alguna razón, el evento change es disparado 
desde ese elemento en particular. Lo que hicimos fue escuchar a este evento desde el campo rangę y llamar a la función 
cambiarrango () cada vezque el evento ocurre. Por este motivo, cuando el usuario desplaza el control del rango o cambia 
los valores dentro de este campo para seleccionar un rango de edad diferente, los nuevos valores son calculados por la 
función cambiarrango (). Los valores admitidos para este campo son periodos de 20 ańos (por ejemplo, 0 a 20 o 20 a 40). 
Sin embargo, el campo solo retorna un valor, como 20, 40, 60 u 80. Para calcular el valor de comienzo del rango, restamos 20 
al valor actual del campo eon la formula edad.value - 20, y grabamos el resultado en la variable cale. El periodo rmnimo 
admitido es 0 a 20, por lo tanto eon un condicional if controlamos esta condición y no permitimos un periodo menor (estudie 
la función cambiarrango () para entender como funciona). 

La segunda escucha agregada en la función iniciar () es para el evento invalid. La función validacion () es 
llamada cuando este evento es disparado para cambiar el color de fondo de los campos invalidos. Recuerde que este evento 
sera disparado desde un campo invalido cuando el botón “ingresar” sea presionado. El evento no contiene una referencia del 
formulario o del botón “ingresar”, sino del campo que generó el error. En la función validacion () esta referencia es 
capturada y grabada en la variable elemento usando la variable e y la propiedad target. La construcción e.target retorna 
una referencia al elemento <input> invalido. Usando esta referencia, en la siguiente linea cambiamos el color de fondo del 
elemento. 

Vblviendo a la función iniciar (), encontraremos una escucha mas que necesitamos analizar. Para tener control 
absoluto sobre el envio del formulario yel momento de validación, creamos un botón regularen lugardel tfpico botón submit. 
Cuando este botón es presionado, el formulario es enviado, pero solo si todos sus elementos son validos. La escucha 
agregada para el evento click en la función iniciar () ejecutara la función enviar() cuando el usuario haga clic sobre el 



botón. Usando el metodo checkvalidity () solicitamos al navegador que realice el proceso de validación y solo enviamos 
el formulario usando el tradicional metodo submit() cuando ya no haymas condiciones irwalidas. 

Lo que hicimos eon el código Javascript fue tomar control sobre todo el proceso de validación, personalizando cada 
aspecto ymodificando el comportamiento del navegador. 


Yalidación en tiempo real 


Cuando abrimos el archivo eon la plantilla del Listado 6-24 en el navegador, podremos notar que no existe una validación en 
tiempo real. Los campos son solo validados cuando el botón “ingresar” es presionado. Para hacer mas practico nuestro 
sistema personalizado de validación, tenemos que aprovechar los atributos provistos por el objęto YalidityState. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Formularios</title> 

<script> 

function iniciar(){ 

edad=document.getElementByld("miedad"); 
edad.addEventListener("change", cambiarrango, false); 
document.informacion.addEventListener("invalid" , 
validacion, true); 

document.getElementByld("enviar").addEventListener("click", 

enviar, false); 

document.informacion.addEventListener("input", controlar, 


function cambiarrango(){ 

var salida=document.getElementByld("rango") ; 
var calc=edad.value-20; 
if (calc<20){ 
calc=0; 

edad.value=20; 

} 

salida.innerHTML=calc+' a 'tedad.value; 

} 

function validacion(e){ 
var elemento=e.target; 
elemento.style.background='#FFDDDD' ; 

} 

function enviar(){ 

var valido=document.informacion.checkValidity(); 
if(valido){ 

document.informacion.submit(); 

} 

} 

function controlar(e){ 
var elemento=e.target; 
if(elemento.validity.valid){ 

elemento.style.background='#FFFFFF'; 

}else{ 

elemento.style.background='#FFDDDD'; 

} 

} 

window.addEventListener("load", iniciar, false); 

</script> 

</head> 

<body> 

<section> 

<form name="informacion" method="get"> 

Usuario: 

<input pattern="[A-Za-z]{3,}" name="usuario" id="usuario" 

maxlength="10" required> 


Email: 



Cinput type="email" name="miemail" id="miemail" required> 
Rango de Edad: 

cinput type="range" name="miedad" id="miedad" min="0" 

max="80" step="20" value="20"> 
Coutput id="rango">0 a 20</output> 

cinput type="button" id="enviar" value="ingresar"> 

C/form> 

c/section> 

c/body> 

C/html> 


Listado 6-25. Validando en tiempo real. 

En el Listado 6-25, una nueva escucha fue agregada para el evento input sobre el formulario. Cada vezque el usuario 
modifica un campo, escribiendo o cambiando su contenido, la función controlar() es ejecutada para responder a este 
evento. 

La función controlar () tambien aprovecha la propiedad target para crear una referencia hacia el elemento que 
dis paro el evento input. La validezdel campo es controlada por medio del estado valid provisto por el atributo validity en 
la construcción elemento. validity. valid. 

El estado valid sera true (verdadero) si el elemento es valido yfalse (falso) si no lo es. Usando esta información 
cambiamos el color del fondo del elemento. Este color sera, por lo tanto, blanco para un campo valido y rojo para uno invalido. 

Con esta simple incorporación logramos que cada vezque el usuario modifica el valor de un campo del formulario, este 
campo sera controlado y validado, ysu condición sera mostrada en pantalla en tiempo real. 


Propiedades de validación 


En el ejemplo del Listado 6-25 controlamos el estado valid. Este estado particular es un atributo del objęto ValidityState 
que retornara el estado de un elemento considerando cada uno de los posibles estados de validación. Si cada condición es 
valida entonces el valordel atributo validsera true (verdadero). 

Existen ocho posibles estados de validezpara las diferentes condiciones: 

valueMissing Este estado es true (verdadero) cuando el atributo requiredfue declarado yel campo esta vacio. 

typeMismatch Este estado es true (verdadero) cuando la sintaxis de la entrada no corresponde con el tipo 
especificado (por ejemplo, si el texto insertado en un tipo de campo email no es una dirección de email valida). 

patternMismatch Este estado es true (verdadero) cuando la entrada no corresponde con el patron provisto por el 
atributo pattern. 

tooLong Este estado es true (verdadero) cuando el atributo maxlength fue declarado y la entrada es mas extensa que 
el valor especificado para este atributo. 

rangeUnderflow Este estado es true (verdadero) cuando el atributo min fue declarado y la entrada es menor que el 
valor especificado para este atributo. 

rangeOverflow Esta estado es true (verdadero) cuando el atributo max fue declarado y la entrada es mas grandę que 
el valor especificado para este atributo. 

stepMismatch Este estado es true (verdadero) cuando el atributo step fue declarado ysu valor no corresponde con 
los valores de atributos como min, max y value. 

customError Este estado es true (verdadero) cuando declaramos un error personalizado usando el metodo 
setCustomValidity () estudiado anteriormente. 

Para controlar estos estados de validación, debemos utilizar la sintaxis elemento. validi ty .estado (donde estado es 
cualquiera de los valores listados arriba). Podemos aprovechar estos atributos para saber exactamente que originó el error 
en un formulario, como en el siguiente ejemplo: 


function enviar(){ 

var elemento=document.getElementByld("usuario"); 
var valido=document.informacion.checkYalidity(); 


if (valido){ 



document.informacion.submit(); 

}else if (elemento.validity.patternMismatch || 

elemento.validity.valueMissing){ 

alert('el nombre de usuario debe tener mlnimo de 3 caracteres'); 

} 


Listado 6-26. Usando estados de validación para mostrar un mensaje de errorpersonalizado. 

En el Listado 6-26, la función enviar () fue modificada para incorporar esta clase de control. El formulario es validado por 
el metodo checkvalidity () y si es valido es enviado eon submit (). En caso contrario, los estados de validación 
patternMismatch y valueMissing para el campo usuario son controlados y un mensaje de error es mostrado cuando el 
valorde alguno de ellos es true (verdadero). 

Hagalo usted mismo: Reemplace la función enviar() en la plantilla del Listado 6-25 eon la nueva función del Listado 
6-26 yabra el archivo HTML en su navegador. 


willYalidate 


En aplicaciones dinamicas es posible que los elementos involucrados no tengan que ser validados. Este puede ser el caso, 
porejemplo, eon botones, campos ocultos o elementos como <output>. La API nos ofrece la posibilidad de detectar esta 
condición usando el atributo willYalidate y la sintaxis elemento.willYalidate. 



6.5 Referenda rapida 


Los formularios constituyen el principal medio de comunicación entre usuarios y aplicaciones web. HTML5 incorpora nuevos 
tipos para el elemento <input>, una API completa para validaryprocesarformularios, yatributos para mejoraresta interface. 


Tipos 


Algunos de los nuevos tipos de campo introducidos por HTML5 tienen condiciones de validación implicitas. Otros solo 
declaran un propósito para el campo que ayudara a los navegadores a presentarel formulario en pantalla. 

email Este tipo de campo valida la entrada como una dirección de email. 

search Este tipo de campo da información al navegador sobre el propósito del campo (busqueda) para ayudar a 
presentar el formulario en pantalla. 

url Este tipo de campo valida la entrada como una dirección web. 

tel Este tipo de campo da información al navegador sobre el propósito del campo (numero telefónico) para ayudar a 
presentar el formulario en pantalla. 

number Este tipo de campo valida la entrada como un numero. Puede ser combinado eon otros atributos (como min, 
max y step) para limitar los numeros permitidos. 

rangę Este tipo de campo genera un nuevo control en pantalla para la selección de numeros. La entrada es limitada por 
los atributos min, max y step. El atributo value establece el valor inicial para el elemento. 

datę Este tipo de campo valida la entrada como una fecha en el formato ańo-mes-dia. 

month Este tipo de campo valida la entrada como una fecha en el formato ańo-mes. 

week Este tipo de campo valida la entrada como una fecha en el formato ańo-semana donde el segundo valor es 
representado por una letra W y el numero de la semana. 

time Este tipo de campo valida la entrada como una hora en el formato hora:minutos: segundos. Tambien puede 
tomarotras sintaxis como hora:minutos. 

datetime Este tipo de campo valida la entrada como fecha y hora completa, incluyendo zona horaria. 

datetime-local Este tipo de campo valida la entrada como una fecha y hora completa, sin zona horaria. 

color Este tipo de campo valida la entrada como un valor de color. 


Atributos 


Nuevos atributos fueron tambien agregados en HTML5 para mejorar la capacidad de los formularios y ayudar al control de 
validación. 

autocomplete Este atributo especifica si los valores insertados seran almacenados para futura referenda. Puede tomar 
dos valores: on y off. 

autofocus Este es un atributo booleano que enfoca el elemento en el que se eneuentra cuando la pagina es cargada. 

novalidate Este atributo es exclusivo para elementos <form>. Es un atributo booleano que establece si el formulario 
sera validado por el navegador o no. 

formnovalidate Este atributo es exclusivo para elementos de formulario individuales. Es un atributo booleano que 
establece si el elemento sera validado por el navegador o no. 

placeholder Este atributo ofrece información que orientara al usuario sobre la entrada esperada. Su valor puede ser 
una palabra simple o un texto corto, y sera mostrado como una marca de agua dentro del campo hasta que el 
elemento es enfocado. 

required Este atributo declara al elemento como requerido para validación. Es un atributo booleano que no dejara que 
el formulario sea enviado hasta que una entrada para el campo sea provista. 

pattern Este atributo especifica una expresión regular contra la cual la entrada sera validada. 

multiple Este es un atributo booleano que permite ingresar multiples valores en el mismo campo (como multiples 
cuentas de email, porejemplo). Los valores deben serseparados porcoma. 



form Este atributo asocia el elemento al formulario. El valor provisto debe ser el valor del atributo id del elemento 
<form>. 

list Este atributo asocia el elemento eon un elemento <datalist> para mostrar una lista de posibles valores para el 
campo. El valor provisto debe ser el valor del atributo id del elemento <datalist>. 


Elementos 


HTML5 tambien incluye nuevos elementos que ayudan a mejoraryexpandirformularios. 

<datalist> Este elemento hace posible incluir una lista de opciones predefinidas que sera mostrada en un elemento 
<input> como valores sugeridos. La lista es construida eon el elemento <option> y cada opción es declarada eon 
los atributos value ylabel. Esta lista de opciones se relaciona eon un elemento <input> por medio del atributo 
list. 

<progress> Este elemento representa el estado en la evolución de una tarea (por ejemplo, una descarga). 

<meter> Este elemento representa una medida, como el trafico de un sitio web. 

<output> Este elemento presenta un valorde salida para aplicaciones dinamicas. 


Metodos 


HTML5 incluye una API especifica para formularios que provee metodos, eventos y propiedades. Algunos de los metodos son: 

setCustomValidity(mensaje) Este metodo nos permite declarar un error y proveer un mensaje de error para un proceso 
de validación personalizado. Para anular el error, debemos llamar al metodo eon una cadena de texto vacla como 
atributo. 

checkValidity() Este metodo solicita al navegador iniciar el proceso de validación. Activa el proceso de validación 
provisto por el navegador sin la necesidad de enviar el formulario. Este metodo retorna true (verdadero) si el 
elemento es valido. 


Eventos 


Los eventos incorporados para esta API son los siguientes: 

invalid Este evento es disparado cuando un elemento invalido es detectado durante el proceso de validación. 
forminput Este evento es disparado cuando un formulario recibe la entrada del usuario. 
formchange Este evento es disparado cuando un cambio ocurre en el formulario. 

Estado 


API Forms provee un grupo de atributos para controlar estados en un proceso de validación personalizado. 

valid Este estado es un estado de validación generał. Retorna true (verdadero) cuando ninguno de los estados 
restantes es true (verdadero), lo que significa que el elemento es valido. 

valueMissing Este estado es true (verdadero) cuando el atributo reąuiredfue incluido en el elemento y el campo esta 
vacio. 

typeMismatch Este estado es true (verdadero) cuando la entrada no es el valor esperado de aeuerdo al tipo de campo 
(por ejemplo, cuando se espera un email o una URL). 

patternMismatch Este estado es true (verdadero) cuando la entrada no es un valor admitido por la expresión regular 
especificada eon el atributo pattern. 

tooLong Este estado es true (verdadero) cuando el largo de la entrada es mayorque el valor especificado en el atributo 
maxlength. 

rangeUnderflow Este estado es true (verdadero) cuando la entrada es menor que el valor declarado para el atributo 


min. 



rangeOverflow Este estado es true (verdadero) cuando la entrada es mayor que el valor declarado para el atributo max. 

stepMismatch Este estado es true (verdadero) cuando el valor declarado para el atributo step no corresponde eon los 
valores en los atributos min, max y value. 

customError Este estado es true (verdadero) cuando un error personalizado fue declarado para el elemento. 




Capitulo 7 
API Canvas 


7.1 Preparandoel lienzo 

EstaAPI ofrece una de las mas poderosas caracteristicas de HTML5. Permite a desarrolladores trabajar eon un medio 
visual e interactivo para proveer capacidades de aplicaciones de escritorio para la web. 

Al comienzo del libro hablamos sobre como HTML5 esta reemplazando previos complementos o plug-ins, como 
Flash o Java applets, por ejemplo. Habla dos cosas importantes a considerar para independizar a la web de 
tecnologias desarrolladas porterceros: procesamiento de video y aplicaciones graficas. El elemento <video> y la API 
para medios cubren el primer aspecto muy bien, pero no hacen nada acerca de los graficos. La API Canvas se hace 
cargo del aspecto grafico y lo hace de una forma extremadamente efectiva. Canvas nos permite dibujar, presentar 
graficos en pantalla, animar y procesar imagenes y texto, y trabaja junto eon el resto de la especificación para crear 
aplicaciones completas e incluso video juegos en 2 y 3 dimensiones para la web. 


El elemento <canvas> 


Este elemento genera un espacio rectangular vacio en la pagina web (lienzo) en el cual seran mostrados los resultados 
de ejecutar los metodos provistos por la API. Cuando es creado, produce solo un espacio en blanco, como un elemento 
<div> vacio, pero eon un propósito totalmente diferente. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Canvas API</title> 

<script src="canvas . j s"X/script> 

</head> 

<body> 

<section id="cajalienzo"> 

<canvas id="lienzo" width="500" height="300"> 
Su navegador no soporta el elemento canvas 
</canvas> 

</section> 

</body> 

</html> 


Listado 7-1. Sintaxis del elemento <canvas>. 

Solo es necesario especificar unos pocos atributos para este elemento, como puede ver en el Listado 7-1. Los 
atributos width (ancho) yheight (alto) declaran el tamaho del lienzo en pixeles. Estos atributos son necesarios debido 
a que todo lo que sea dibujado sobre el elemento tendra esos valores como referenda. Al atributo id, como en otros 
casos, nos facilita el acceso al elemento desde el código Javascript. 

Eso es basicamente todo lo que el elemento <canvas> hace. Simplemente crea una caja vacla en la pantalla. Es 
solo a traves de Javascript y los nuevos metodos y propiedades introducidos por la API que esta superficie se 
transforma en algo practico. 

IMPORTANTE: Por razones de compatibilidad, en caso de que Canvas API no se eneuentre disponible en el 
navegador, el contenido entre las etiguetas <canvas>sera mostrado en pantalla. 


getContext() 


El metodo getContext () es el primer metodo que tenemos que llamar para dejar al elemento <canvas> listo para 
trabajar. Genera un contexto de dibujo que sera asignado al lienzo. A traves de la referenda que retorna podremos 
aplicar el resto de la API. 



function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 

lienzo=elemento.getContext('2d'); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-2. Creando el contexto de dibujo para el lienzo. 

En el Listado 7-2, una referencia al elemento <canvas> fue almacenada en la variable elemento y el contexto de 
dibujo fue creado porgetContext( ’2d' ). El metodo puede tomar dos valores: 2d y 3d. Esto es, por supuesto, para 
ambientes de 2 dimensiones y 3 dimensiones. Por el momento solo el contexto 2d esta disponible, pero serios 
esfuerzos estan siendo volcados en el desarrollo de una API estable en 3 dimensiones. 

El contexto de dibujo del lienzo sera una grilla de pixeles listados en filas ycolumnas de arriba a abajo e izquierda a 
derecha, eon su origen (el pixel 0,0) ubicado en la esquina superior izquierda del lienzo. 

Hagalo usted mismo: Copie el documento HTML del Listado 7-1 dentro de un nuevo archivo vacio. Tambien 
necesitara crear un archivo llamado canvas. js y copiar el código del Listado 7-2 en su interior. Cada código 
presentado en este capitulo es independiente yreemplaza al anterior. 

Conceptos basicos: Cuando una variable es declarada dentro de una función sin la palabra clave var, sera 
global. Esto significa que la variable sera accesible desde otras partes del código, incluido el interior de 
funciones. En el código del Listado 7-2, declaramos la variable lienzo como global para poder tener siempre 
acceso al contexto del lienzo. 




7.2 Dibujando en el lienzo 


Luego de que el elemento <canvas> y su contexto han sido inicializados podemos finalmente comenzar a crear y 
manipular graficos. La lista de herramientas provista por la API para este propósito es extensa, desde la creación de 
simples formas ymetodos de dibujo hasta texto, sombras o transformaciones complejas. Vamos a estudiarlas una por 
una. 


Dibujando rectangulos 


Normalmente el desarrollador debera preparar la figura a ser dibujada en el contexto (como veremos pronto), pero 
existen algunos metodos que nos permiten dibujar directamente en el lienzo, sin preparación previa. Estos metodos 
son especificos para formas rectangulares y son los unicos que generan una forma primitiva (para obtener otras formas 
tendremos que combinar otras tecnicas de dibujo ytrazados complejos). Los metodos disponibles son los siguientes: 

fillRect(x, y, ancho, alto) Este metodo dibuja un rectangulo sólido. La esquina superior izquierda sera ubicada en 
la posición especificada por los atributos x e y. Los atributos ancho y alto declaran el tamano. 


strokeRect(x, y, ancho, alto) Similar al metodo anterior, este dibujara un rectangulo vacio (solo su contorno). 

clearRect(x, y, ancho, alto) Esta metodo es usado para substraer pixeles del area especificada por sus atributos. 
Es un borrador rectangular. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

lienzo.strokeRect(100,100,120,120); 
lienzo.fillRect(110,110,100,100) ; 
lienzo.clearRect(120,120,80,80); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-3. Dibujando rectangulos. 

Esta es la misma función del Listado 7-2, pero incorpora los nuevos metodos estudiados para dibujar una figura en 
el lienzo. Como puede ver, el contexto fue asignado a la variable global lienzo, y ahora esta variable es usada para 
referenciar el contexto en cada metodo. 

El primer metodo usado en la función, strokeRect (100,100,120,120), dibuja un rectangulo vacio eon la esquina 
superior izquierda en la posición 100,100 y un tamano de 120 pixeles (este es un cuadrado de 120 pixeles). El 
segundo metodo, fillRect (110,110, 100,100), dibuja un rectangulo sólido, esta vez comenzando desde la 
posición 110,110 del lienzo. Y finalmente, eon el ultimo metodo, clearRect (120,120,80,80), un recuadro de 80 
pixeles es substraido del centro de la figura. 
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Figura 7-1. Representación del lienzo y los rectangulos dibujados poręI código del Listado 7-3. 




La Figura 7-1 es solo una representación de lo que vera en la pantalla luego de ejecutar el código del Listado 7-3. El 
elemento <canvas> es como una grilla, eon su origen en la esquina superior izquierda yel tamańo especificado en sus 
atributos. Los rectangulos son dibujados en el lienzo en la posición declarada por los atributos x e y, y uno sobre el otro 
de aeuerdo al orden en el código (el primero en aparecer en el código sera dibujado primero, el segundo sera dibujado 
por encima del anterior, y asi sucesivamente). Existe un metodo para personalizar como las figuras son dibujadas en 
pantalla, pero lo veremos mas adelante. 


Colores 


Hasta el momento hemos usado el color otorgado por defecto, negro sólido, pero podemos especificar el color que 
queremos aplicar mediante sintaxis CSS utilizando las siguientes propiedades: 

strokeStyle Esta propiedad declara el color para el contorno de la figura. 

fillStyle Esta propiedad declara el color para el interior de la figura. 

globalAlpha Esta propiedad no es para definir color sino transparencia. Especifica la transparencia para todas las 
figuras dibujadas en el lienzo. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

lienzo.fillStyle="#000099"; 
lienzo.strokeStyle="#990000"; 

lienzo.strokeRect(100,100,120,120); 
lienzo.fillRect(110,110,100,100); 
lienzo.clearRect(120,120,80,80); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-4. Aplicando color. 

Los colores en el Listado 7-4 fueron declarados usando numeros hexadecimales. Podemos tambien usar 
funciones comorgb()o incluso especificar transparencia para la figura aprovechando la función rgba(). Estos 
metodos deben sersiempre escritos entre comillas (porejemplo, strokeStyle="rgba(255,165,0,l) "). 

Cuando un nuevo color es especificado se vuelve el color por defecto para el resto de los dibujos, a menos que 
volvamos a cambiarlo mas adelante. 

Apesarde que el uso de la función rgba() es posible, existe otrą propiedad mas especifica para declarar el nivel 
de transparencia: globalAlpha. Su sintaxis es globalAlpha=valor, donde valor es un numero entre 0.0 (totalmente 
opaco) y 1.0 (totalmente transparente). 


Gradientes 


Gradientes son una herramienta esencial en cualquier programa de dibujo estos dias, y esta API no es la excepción. Asi 
como en CSS3, los gradientes en la API Canvas pueden ser lineales o radiales, y pueden incluir puntos de terminación 
para combinar colores. 

createLinearGradient(x1, yl, x2, y2) Este metodo crea un objęto que luego sera usado para aplicar un gradiente 
lineal al lienzo. 

createRadialGradient(x1, yl, rl, x2, y2, r2) Este metodo crea un objęto que luego sera usado para aplicar un 
gradiente circular o radial al lienzo usando dos clrculos. Los valores representan la posición del centro de 
cada circulo ysus radios. 

addColorStop(posición, color) Este metodo especifica los colores a ser usados por el gradiente. El atributo 
posición es un valor entre 0.0 y 1.0 que determina dónde la degradación comenzara para ese color en 
particular. 


function iniciar(){ 



var elemento=document.getElementByld('lienzo') ; 
lienzo=elemento.getContext('2d'); 


var gradiente=lienzo.createLinearGradient(0,0,10,100) ; 
gradiente.addColorStop(0.5, '#0000FF'); 

gradiente.addColorStop(1, '#000000'); 
lienzo.fillStyle=gradiente; 

lienzo.fillRect(10,10,100,100); 
lienzo.fillRect(150,10,200,100); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-5. Aplicando un gradiente lineal aI lienzo. 

En el Listado 7-5, creamos el objęto gradiente desde la posición 0,0 a la 10,100, otorgando una leve inclinación 
hacia la izquierda. Los colores fueron declarados por el metodo addColorStop () y el gradiente logrado fue finalmente 
aplicado a la propiedad filistyle, como un color regular. 

Notę que las posiciones del gradiente son correspondientes al lienzo, no a las figuras que queremos afectar. El 
resultado es que si movemos los rectangulos dibujados al finał de la función hacia una nueva posición, el gradiente 
para esos triangulos cambiara. 

Hagalo usted mismo: El gradiente radial es similar al de CSS3. Intente reemplazar el gradiente lineal en el código 
del Listado 7-5 por un gradiente radial usando una expresión como createRadialGradient (0,0,30,0,0,300). 
Tambien puede experimentar moviendo los rectangulos de posición para ver como el gradiente es aplicado a 
estas figuras. 


Creando trazados 


Los metodos estudiados hasta el momento dibujan directamente en el lienzo, pero ese no es siempre el caso. 
Normalmente tendremos que procesar figuras en segundo piano y una vezque el trabajo este hecho enviar el resultado 
al contexto para que sea dibujado. Con este propósito, API Canvas introduce varios metodos eon los que podremos 
generar trazados. 

Un trazado es como un mapa a ser seguido por el lapiz. Una vez declarado, el trazado sera enviado al contexto y 
dibujado de forma permanente en el lienzo. El trazado puede incluir diferentes tipos de lineas, como lineas rectas, 
arcos, rectangulos, entre otros, para crearfiguras complejas. 

Existen dos metodos para comenzarycerrarel trazado: 

beginPath() Este metodo comienza la descripción de una nueva figura. Es llamado en primer lugar, antes de 
comenzar a crear el trazado. 

closePath() Este metodo cierra el trazado generando una llnea recta desde el ultimo punto hasta el punto de 
origen. Puede ser ignorado cuando utilizamos el metodo fili () para dibujar el trazado en el lienzo. 

Tambien contamos con tres metodos para dibujar el trazado en el lienzo: 

stroke() Este metodo dibuja el trazado como una figura vacia (solo el contorno). 

fill() Este metodo dibuja el trazado como una figura solida. Cuando usamos este metodo no necesitamos cerrar el 
trazado con closePath(), el trazado es automaticamente cerrado con una llnea recta trazada desde el punto 
finał hasta el origen. 

clip() Este metodo declara una nueva area de corte para el contexto. Cuando el contexto es inicializado, el area de 
corte es el area completa ocupada por el lienzo. El metodo clip() cambiara el area de corte a una nueva 
forma creando de este modo una mascara. Todo lo que caiga fuera de esa mascara no sera dibujado. 


function iniciar (){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

lienzo.beginPath(); 

// aqui va el trazado 

lienzo.stroke(); 

} 

window.addEventListener("load" , iniciar, false); 



Listado 7-6. Reglas bśsicas para trabajar eon trazados. 

El código del Listado 7-6 no crea absolutamente nada, solo incorpora los metodos necesarios para iniciar y luego 
dibujar el trazado en pantalla. Para crear el trazado y la figura real que sera enviada al contexto y dibujada en el lienzo, 
contamos eon varios metodos disponibles: 

moveTo(x, y) Este metodo mueve el lapiz a una posición especffica para continuar eon el trazado. Nos permite 
comenzar o continuar el trazado desde diferentes puntos, evitando lineas continuas. 

lineTo(x, y) Este metodo genera una linea recta desde la posición actual del lapiz hasta la nueva declarada por los 
atributos x e y. 

rect(x, y, ancho, alto) Este metodo genera un rectangulo. Adiferencia de los metodos estudiados anteriormente, 
este generara un rectangulo que formara parte del trazado (no directamente dibujado en el lienzo). Los 
atributos tienen la misma función. 

arc(x, y, radio, angulo inicio, angulo finał, dirección) Este metodo genera un arco o un circulo en la posición x e y, 
eon un radio y desde un angulo declarado por sus atributos. El ultimo valor es un valor booleano (falso o 
verdadero) para indicar la dirección a favor o en contra de las agujas del reloj. 

quadraticCurveTo(cpx, cpy, x, y) Este metodo genera una curva Bezier cuadratica desde la posición actual del 
lapiz hasta la posición declarada por los atributos x e y. Los atributos cpx yepy indican el punto que dara 
forma a la curva. 

bezierCurveTo(cp1x, cply, cp2x, cp2y, x, y) Este metodo es similar al anterior pero agrega dos atributos mas 
para generar una curva Bezier cubica. Ahora disponemos de dos puntos para moldear la curva, declarados por 
los atributos cplx, cply, cp2xycp2y. 

Veamos un trazado sencillo para entender como funcionan: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 
lienzo.beginPath(); 

lienzo.moveTo (100,100); 
lienzo.lineTo (200 , 200); 
lienzo.lineTo (100 , 200); 

lienzo.stroke(); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-7. Nuestro primer trazado. 

Recomendamos siempre establecer la posición inicial del lapiz inmediatamente despues de iniciar el trazado eon 
beginPath (). En el código del Listado 7-7 el primer paso fue mover el lapiz a la posición 100,100 y luego generar una 
linea desde ese punto hasta el punto 200,200. Ahora la posición del lapiz es 200,200 y la siguiente linea sera 
generada desde aqui hasta el punto 100,200. Finalmente, el trazado es dibujado en el lienzo como una forma vacia eon 
el metodo stroke (). 

Si prueba el código en su navegador, vera un triangulo abierto en la pantalla. Este triangulo puede ser cerrado o 
incluso rellenado ytransformado en una figura solida usando diferentes metodos, como vemos en el siguiente ejemplo: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 

lienzo=elemento.getContext('2d'); 

lienzo.beginPath(); 

lienzo.moveTo(100,100); 

lienzo.lineTo (200,200) ; 

lienzo.lineTo (100,200) ; 

lienzo.closePath(); 

lienzo.stroke(); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-8. Completando el triśngulo. 



El metodo closePath () simplemente agrega una linea recta al trazado, desde el ultimo al primer punto, cerrando la 
figura. 

Usando el metodo strokef) al finał de nuestro trazado dibujamos un triangulo vacio en el lienzo. Para lograr una 
figura solida, este metodo debe ser reemplazado por fili (): 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 

lienzo=elemento.getContext('2d'); 

lienzo.beginPath(); 

lienzo.moveTo(100,100); 

lienzo.lineTo(200,200); 

lienzo.lineTo (100,200); 

lienzo.fili () ; 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-9. Triangulo sólido. 

Ahora la figura en la pantalla sera un triangulo sólido. El metodo fill() cierra el trazado automaticamente, por lo 
que ya no tenemos que usar closePath () para lograrlo. 

Uno de los metodos mencionados anteriormente para dibujar un trazado en el lienzo fue clip(). Este metodo en 
realidad no dibuja nada, lo que hace es crear una mascara eon la forma del trazado para seleccionar que sera dibujado 
yque no. Todo lo que caiga fuera de la mascara no se dibujara en el lienzo. Veamos un ejemplo: 


function iniciar (){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

lienzo.beginPath(); 
lienzo.moveTo (100,100); 
lienzo.lineTo(200,200); 
lienzo.lineTo (100,200); 

lienzo.clip(); 

lienzo.beginPath(); 
for(f=0; f<300; f=f+10){ 
lienzo.moveTo(0,f); 
lienzo.lineTo(500,f); 

} 

lienzo.stroke(); 

} 

window.addEventListener ("load", iniciar, false); 


Listado 7-10. Usando el triangulo anterior como una mascara. 

Para mostrar exactamente como funciona el metodo clip (), en el Listado 7-10 utilizamos un bucie for para crear 
lineas horizontales cada 10 pixeles. Estas lineas van desde el lado izquierdo al lado derecho del lienzo, pero solo las 
partes de las lineas que caen dentro de la mascara (el triangulo) seran dibujadas. 

Ahora que ya sabemos como dibujar trazados, es tiempo de ver el resto de las alternativas eon las que contamos 
para crearlos. Hasta el momento hemos estudiado como generar lineas rectas y formas rectangulares. Para figuras 
circulares, la API provee tres metodos: arc(), quadraticCurveTo () ybezierCurveTo (). El primero es relativamente 
sencillo ypuede generar circulos parciałeś o completos, como mostramos en el siguiente ejemplo: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 
lienzo.beginPath(); 

lienzo.arc(100,100,50,0,Math.PI*2, false); 

lienzo.stroke() ; 



} 

window.addEventListener("load", iniciar, false); 


Listado 7-11. Circulos con ,r C o. 

Lo primero que seguramente notara en el metodo arc() en nuestro ejemplo es el uso del valorPi. Este metodo 
usa radianes en lugar de grados para los valores del angulo. En radianes, el valor pi representa 180 grados, por lo que 
la formula pi*2 multiplica pi por 2 obteniendo un angulo de 360 grados. 

El código en el Listado 7-11 genera un arco eon centro en el punto 100,100 y un radio de 50 pixeles, comenzando a 
0 grados yterminando aMath.Pi*2 grados, lo que representa un circulo completo. El uso de la propiedad pi del objęto 
Math nos permite obtener el valor preciso de PI. 

Si necesitamos calcular el valor en radianes de cualquier angulo en grados usamos la formula: Math .pi / 180 x 
grados, como en el próximo ejemplo: 


function iniciar (){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 
lienzo.beginPath(); 

var radianes=Math.PI/180*45; 

lienzo.arc(100,100,50,0,radianes, false); 
lienzo.stroke (); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-12. Un arco de 45 grados. 

Con el código del Listado 7-12 obtenemos un arco que cubre 45 grados de un circulo. Intente cambiarel valorde la 
dirección a true (verdadero). En este caso, el arco sera generado desde 0 grados a 315, creando un circulo abierto. 

Una cosa importante a considerar es que si continuamos construyendo el trazado luego del arco, el actual punto de 
comienzo sera el finał del arco. Si no deseamos que esto pasę tendremos que usar el metodo moveTo() para cambiar 
la posición del lapiz, como hicimos anteriormente. Sin embargo, si la próxima figura es otro arco (por ejemplo, un circulo 
completo) siempre reeuerde que el metodo moveTo () mueve el lapiz virtual hacia el punto en el cual el circulo 
comenzara a ser dibujado, no el centro del circulo. Digamos que el centro del efreulo que queremos dibujar se 
eneuentra en el punto 300,150 y su radio es de 50. El metodo moveTo () deberla mover el lapiz a la posición 350,150 
para comenzar a dibujar el circulo. 

Ademas de arc(), existen dos metodos mas para dibujar curvas, en este caso curvas complejas. El metodo 
quadraticCurveTo () genera una curva Bezier cuadratica, y el metodo bezierCurveTo () es para curvas Bezier 
cubicas. La diferencia entre estos dos metodos es que el primero cuenta con un solo punto de control yel segundo con 
dos, creando de este modo diferentes tipos de curvas. 


function iniciar (){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 
lienzo.beginPath(); 
lienzo.moveTo (50,50); 

lienzo.quadraticCurveTo (100 , 125 , 50,200) ; 

lienzo.moveTo (250,50); 

lienzo.bezierCurveTo (200,125, 300,125, 250,200); 

lienzo.stroke(); 

} 

window.addEventListener("load" , iniciar, false); 


Listado 7-13. Curvas complejas. 

Para la curva cuadratica movimos el lapiz virtual a la posición 50,50 y finalizamos la curva en el punto 50,200. El 
punto de control para esta curva fue ubicado en la posición 100,125. 

La curva generada porel metodo bezierCurveTo () es un poco mas compleja. Haydos puntos de control para esta 
curva, el primero en la posición 200,125 yel segundo en la posición 300,125. 

Los yalores en la Figura 7-2 indican los puntos de control para las curvas. Moyiendo estos puntos cambiamos la 



forma de la curva. 
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Figura 7-2. Representación de curvas Bśzier y sus puntos de control. 

Hagalo usted mismo: Puede agregar tantas curvas como necesite para construir su figura. Intente cambiar los 
valores de los puntos de control en el Listado 7-13 para ver como afectan a las curvas. Construya figuras mas 
complejas combinando curvas ylineas para entendercómo la construcción del trazado es realizada. 


Estilos de linea 


Hasta esta parte del capltulo hemos usado siempre los mismos estilos de lineas. El ancho, la terminación y otros 
aspectos de la llnea pueden ser modificados para obtener exactamente el tipo de llnea que necesitamos para nuestros 
dibujos. 

Existen cuatro propiedades especificas para este propósito: 

lineWidth Esta propiedad determina el grosor de la llnea. Por defecto el valor es 1.0 unidades. 

lineCap Esta propiedad determina la forma de la terminación de la llnea. Puede recibir uno de estos tres valores: 
butt, round y square. 

lineJoin Esta propiedad determina la forma de la conexión entre dos lineas. Los valores posibles son: round, 
bevel y mi ter. 

miterLimit Trabajando en conjunto eon lineJoin, esta propiedad determina cuanto la conexión de dos lineas 
sera extendida cuando la propiedad lineJoin es declarada eon el valormiter. 

Las propiedades afectaran el trazado completo. Cada vezque tenemos que cambiar las caracterfsticas de las lineas 
debemos crear un nuevo trazado. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d') ; 
lienzo.beginPath() ; 

lienzo.arc(200,150,50,0,Math.PI*2, false); 
lienzo.stroke() ; 

lienzo.lineWidth=10; 
lienzo.lineCap="round"; 

lienzo.beginPath(); 

lienzo.moveTo(230,150); 

lienzo.arc(200,150,30,0,Math.PI, false); 

lienzo.stroke() ; 

lienzo.lineWidth=5; 
lienzo.lineJoin="miter"; 

lienzo.beginPath(); 
lienzo.moveTo(195,135) ; 
lienzo.lineTo(215,155) ; 
lienzo.lineTo(195,155) ; 
lienzo.stroke() ; 




} 

window.addEventListener("load", iniciar, false); 


Listado 7-14. Propiedades para prób ar diferentes estilos de linea. 

Comenzamos el dibujo en el código del Listado 7-14 creando un trazado para un circulo completo eon propiedades 
por defecto. Luego, usando linewith, cambiamos el ancho de la linea a 10 y definimos la propiedad lineCap como 
round. Esto hara que el siguiente trazado sea mas grueso ycon terminaciones redondeadas. Para crearun trazado eon 
estas caracterfsticas, primero movimos el lapiza la posición 230,150 y luego generamos un semicirculo. Los extremos 
redondeados nos ayudaran a simular una boca sonriente. 

Finalmente, agregamos un trazado creado eon dos llneas para lograr una forma similar a una nariz. Las lineas para 
este trazado fueron configuradas eon un ancho de 5 y seran unidas de aeuerdo a la propiedad lineJoin y su valor 
miter. Esta propiedad hara a la nariz lucir puntiaguda, expandiendo las puntas de las lineas en la unión hasta que 
ambas alcancen un punto en comun. 

Hagalo usted mismo: Experimente eon las lineas para la nariz modificando la propiedad miterLimit (por 
ejemplo, eon la instrucción miterLimit=2). Cambie el valor de la propiedad lineJoin a round obevel. 
Tambien puede modificar la forma de la boca probando diferentes valores para la propiedad lineCap. 


Texto 


Escribir texto en el lienzo es tan simple como definir unas pocas propiedades y llamar al metodo apropiado. Tres 
propiedades son ofrecidas para configurartexto: 

font Esta propiedad tiene una sintaxis similar a la propiedad font de CSS, y acepta los mismos valores. 

textAlign Esta propiedad alinea el texto. Existen varios valores posibles: start (comienzo), end (finał), left 
(izquierda), right (derecha) y center (centro). 

textBaseline Esta propiedad es para alineamiento vertical. Establece diferentes posiciones para el texto 
(incluyendo texto Unicode). Los posibles valores son: top, hanging, middle, alphabetic, ideographic y 
bottom. 

Dos metodos estan disponibles para dibujartexto en el lienzo: 

strokeText(texto, x, y) Del mismo modo que el metodo stroke() para el trazado, este metodo dibujara el texto 
especificado en la posición x,y como una figura vacia (solo los contornos). Puede tambien incluir un cuarto 
valor para declarar el tarnaho maximo. Si el texto es mas extenso que este ultimo valor, sera encogido para 
caberdentro del espacio establecido. 

fillText(texto, x, y) Este metodo es similar al metodo anterior excepto que esta vez el texto dibujado sera sólido 
(igual que la función para el trazado). 


function iniciar (){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

lienzo.font="bold 24px verdana, sans-serif"; 

lienzo.textAlign="start"; 

lienzo.fillText("Mi mensaje", 100,100); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-15. Dibujando texto. 

Como podemos veren el Listado 7-15, la propiedad font puede tomarvarios valores a la vez, usando exactamente 
la misma sintaxis que CSS. La propiedad textAling hace que el texto sea dibujado desde la posición 100,100 (si el 
valor de esta propiedad fu era end, por ejemplo, el texto terminaria en la posición 100,100). Finalmente, el metodo 
fillText dibuja un texto sólido en el lienzo. 

Ademas de los previamente mencionados, la API provee otro metodo importante para trabajarcon texto: 

measureText() Este metodo retorna información sobre el tarnaho de un texto especifico. Puede ser util para 
combinartexto eon otras formas en el lienzo ycalcular posiciones o incluso colisiones en animaciones. 



function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

lienzo.font="bold 24px verdana, sans-serif"; 

lienzo.textAlign="start"; 

lienzo.textBaseline="bottom"; 

lienzo.fillText("Mi mensaje", 100,124); 

var tamano=lienzo.measureText("Mi mensaje"); 

lienzo.strokeRect(100,100,tamano.width,24); 

} 

window.addEventListener("load" , iniciar, false); 


Listado 7-16. Midiendo texto. 

En este ejemplo comenzamos eon el mismo código del Listado 7-15, pero agregamos un alineamiento vertical. La 
propiedad textBaseline fue establecida como bottom (inferior), lo que significa que la base o parte interior del texto 
estara ubicada en la posición 124. Esto nos ayudara a conocer la posición vertical exacta del texto en el lienzo. 

Usando el metodo measureText() y la propiedad width (ancho) obtenemos el tamano horizontal del texto. Con 
esta medida estamos listos para dibujar un rectangulo que rodeara al texto. 

Hagalo usted mismo: Utilizando el código del Listado 7-16, pruebe diferentes valores para las propiedades 
textAlign ytextBaseline. Use el rectangulo como referenda para comprobar como estas propiedades 
trabajan. Escriba un texto diferente para vercómo el rectangulo se adapta automaticamente a su tamano. 


Sombras 


Por supuesto, sombras son tambien una parte importante de Canvas API. Podemos generar sombras para cada 
trazado e incluso textos. La API provee cuatro propiedades para hacerlo: 

shadowColor Esta propiedad declara el colorde la sombra usando sintaxis CSS. 

shadowOffsetX Esta propiedad recibe un numero para determinar que tan lejos la sombra estara ubicada del 
objęto (dirección horizontal). 

shadowOffsetY Esta propiedad recibe un numero para determinar que tan lejos la sombra estara ubicada del 
objęto (dirección vertical). 

shadowBIur Esta propiedad produce un efecto de difuminación para la sombra. 


function iniciar (){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

lienzo.shadowColor="rgba(0,0,0,0.5) " ; 
lienzo.shadowOffsetX=4; 
lienzo.shadowOffsetY=4; 
lienzo.shadowBlur=5; 

lienzo.font="bold 50px verdana, sans-serif"; 
lienzo.fillText("Mi mensaje ", 100,100); 

} 

window.addEventListener("load" , iniciar, false); 


Listado 7-17. Aplicando sombras. 

La sombra creada en el Listado 7-17 usa la función rgba() para obtener un color negro semitransparente. Es 
desplazada 4 pixeles del objęto ytiene un valorde difuminación de 5. 

Hagalo usted mismo: Aplique sombras a otrą figura en lugar de texto. Por ejemplo, pruebe generar sombras para 
figuras vaclas ysólidas, usando rectangulos o clrculos. 


Transformaciones 



LAAPI Canvas ofrece operaciones complejas que es posible aplicar sobre el lienzo para afectar los graficos que luego 
son dibujados en el. Estas operaciones son realizadas utilizando cinco metodos de transformación diferentes, cada 
uno para un propósito especifico. 


translate(x, y) Este metodo de transformación es usado para mover el origen del lienzo. Cada lienzo comienza en 
el punto 0,0 localizado en la esquina superior izquierda, y los valores se incrementan en cualquier dirección 
dentro del lienzo. N/blores negativos caen fuera del lienzo. Aveces es bueno poder usar valores negativos para 
crear figuras complejas. El metodo translate () nos permite mover el punto 0,0 a una posición especifica 
para usarel origen como referenda para nuestros dibujos o para aplicar otras transformaciones. 

rotate(angulo) Este metodo de transformación rotara el lienzo alrededor del origen tantos angulos como sean 
especificados. 

scale(x, y) Este metodo de transformación incrementa o disminuye las unidades de la grilla para reducir o 
ampliar todo lo que este dibujado en el lienzo. La escala puede ser cambiada independientemente para el 
valor horizontal o vertical usando los atributos x e y. Los valores pueden ser negativos, produciendo un efecto 
de espejo. Por defecto los valores son iguales a 1.0. 

transformfml, m2, m3, m4, dx, dy) El lienzo contiene una matriz de valores que especifican sus propiedades. El 
metodo transform() aplica una nueva matrizsobre la actual para modificarel lienzo. 

setTransformfml, m2, m3, m4, dx, dy) Este metodo reinicializa la actual matrizde transformación yestablece una 
nueva desde los valores provistos en sus atributos. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 
lienzo.font="bold 20px verdana, sans-serif"; 
lienzo.fillText("PRUEBA",50,20); 

lienzo.translate(50,70); 
lienzo.rotate(Math.PI/180*45); 

lienzo.fillText("PRUEBA",0,0); 

lienzo.rotate(-Math.PI/180*45); 
lienzo.translate(0,100); 
lienzo.scalę(2,2); 

lienzo.fillText("PRUEBA",0,0); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-18. Moviendo , rotando y escalando. 

No hay mejor forma de entender como funcionan las transformaciones que usarlas en nuestro código. En el Listado 
7-18, aplicamos los metodos translate(), rotate() y scalę () al mismo texto. Primero dibujamos un texto en el 
lienzo eon la configuración por defecto. El texto aparecera en la posición 50,20 eon un tamańo de 20 pixeles. Luego de 
esto, usando translate () , el origen del lienzo es movido a la posición 50,70 y el lienzo completo es rotado 45 
grados eon el metodo rotate (). Otro texto es dibujado en el nuevo origen, eon una inclinación de 45 grados. Las 
transformaciones aplicadas se vuelven los valores por defecto, por lo tanto antes de aplicar el siguiente metodo 
scalę () rotamos el lienzo 45 grados negativos para ubicarlo en su posición original. Realizamos una transformación 
mas moviendo el origen otros 100 pixeles hacia abajo. Finalmente, la escala del lienzo es duplicada yun nuevo texto es 
dibujado al dobie del tamańo de los anteriores. 

Cada transformación es acumulativa. Si realizamos dos transformaciones usando scalę (), por ejemplo, el 
segundo metodo realizara el escalado considerando el estado actual del lienzo. Una orden scalę (2,2) luego de otrą 
scalę (2,2) cuadruplicara la escala del lienzo. Y para los metodos de transformación de la matriz, esta no es una 
excepción. Es por esto que contamos eon dos metodos para realizar esta clase de transformaciones: transform() y 
setTransform(). 


function iniciar(){ 

var elemento=document.getElementByld('lienzo') ; 
lienzo=elemento.getContext('2d' ) ; 

lienzo.transform(3,0,0,1,0,0); 

lienzo.font="bold 20px verdana, sans-serif"; 
lienzo.fillText("PRUEBA",20,20); 

lienzo.transform(l,0,0,10,0,0); 

lienzo.font="bold 20px verdana, sans-serif"; 



lienzo.fillText("PRUEBA", 100,20) ; 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-19. Transformaciones acumulativas sobre la matriz. 

Al igual que en el código anterior, en el Listado 7-19 aplicamos varios metodos de transformación sobre el mismo 
texto para comparar efectos. Los valores por defecto de la matriz del lienzo son 1,0,0,1,0,0. Cambiando el primer 
valora 3, en la primera transformación de nuestro ejemplo arriba, estiramos el lienzo horizontalmente. El texto dibujado 
luego de esta transformación sera mas ancho que en condiciones por defecto. 

Con la siguiente transformación, el lienzo fue estirado verticalmente cambiando el cuarto valor a 10 y preservando 
los anteriores. 

Un detalle importante a recordar es que las transformaciones son aplicadas sobre la matriz declarada en previas 
transformaciones, por lo que el segundo texto mostrado por el código del Listado 7-19 sera igual de ancho que el 
anterior (es estirado horizontal y verticalmente). Para reinicializar la matriz y declarar nuevos valores de transformación, 
podemos usar el metodo setTransform(). 

Hagalo usted mismo: Reemplace el ultimo metodo transform() en el ejemplo por setTransform() y 
compruebe los resultados. Usando solo un texto, cambie cada valor en el metodo transform() para conocer la 
clase de transformación realizada en el lienzo por cada uno de ellos. 


Restaurando el estado 


La acumulación de transformaciones hace realmente dificil volver a anteriores estados. En el código del Listado 7-18, 
por ejemplo, tuvimos que recordar el valorde rotación usado previamente para poder realizar una nueva rotación yvolver 
el lienzo al estado original. Considerando situaciones como esta, Canvas API provee dos metodos para grabar y 
recuperarel estado del lienzo. 

save() Este metodo graba el estado del lienzo, incluyendo transformaciones ya aplicadas, valores de propiedades 
de estilo yla actual mascara (el area creada porel metodo clip() , si existe). 

restore() Este metodo recupera el ultimo estado grabado. 


function iniciar (){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

lienzo.save(); 

lienzo.translate (50,70); 

lienzo.font="bold 20px verdana, sans-serif"; 
lienzo.fillText("PRUEBA1",0,30); 

lienzo.restore(); 

lienzo.fillText("PRUEBA2",0,30); 

} 

window.addEventListener("load" , iniciar, false); 


Listado 7-20. Grabando el estado del lienzo. 

Si ejecuta el código del Listado 7-20 en su navegador, vera el texto “PRUEBA1” en grandes letras al centro del lienzo, 
y el texto “PRUEBA2” en letras pequeńas, cercano al origen. Lo que hicimos fue grabar el estado por defecto del lienzo y 
luego establecer una nueva posición para el origen y estilos para el texto. El primer texto es dibujado con esta 
configuración, pero antes de dibujar el segundo texto el estado original es restaurado, por lo que este texto es mostrado 
con los estilos por defecto, no con los declarados para el primero. 

No importa cuantas transformaciones hayamos realizado, luego de llamar al metodo restore () la configuración 
del lienzo sera retornada exactamente a su estado anterior (el ultimo grabado). 


globalCompositeOperation 


Cuando hablamos de trazados dijimos que existe una propiedad para determinar como una figura es posicionada y 
combinada con figuras dibujadas previamente en el lienzo. La propiedad es globalCompositeOperation y su valor 
por defecto es source-over, lo que significa que la nueva figura sera dibujada sobre las que ya existen en el lienzo. La 



propiedad ofrece 11 valores mas: 


source-in Solo la parte de la nueva figura que se sobrepone a las figuras previas es dibujada. El resto de la figura, 
e incluso el resto de las figuras previas, se vuelven transparentes. 

source-out Solo la parte de la nueva figura que no se sobrepone a las figuras previas es dibujada. El resto de la 
figura, e incluso el resto de las figuras previas, se vuelven trans parentes. 

source-atop Solo la parte de la nueva figura que se superpone eon las figuras previas es dibujada. Las figuras 
previas son preservadas, pero el resto de la nueva figura se vuelve transparente. 

lighter Ambas figuras son dibujadas (nueva y vieja), pero el color de las partes que se superponen es obtenido 
adicionando los valores de los colores de cada figura. 

xor Ambas figuras son dibujadas (nueva y vieja), pero las partes que se superponen se vuelven trans parentes. 

destination-over Este es el opuesto del valor por defecto. Las nuevas figuras son dibujadas detras de las viejas 
que ya se eneuentran en el lienzo. 

destination-in Las partes de las figuras existentes en el lienzo que se superponen eon la nueva figura son 
preservadas. El resto, incluyendo la nueva figura, se vuelven trans parentes. 

destination-out Las partes de las figuras existentes en el lienzo que no se superponen eon la nueva figura son 
preservadas. El resto, incluyendo la nueva figura, se vuelven trans parentes. 

destination-atop Las figuras existentes y la nueva son preservadas solo en la parte en la que se superponen. 

darker Ambas figuras son dibujadas, pero el color de las partes que se superponen es determinado 
substrayendo los valores de los colores de cada figura. 

copy Solo la nueva figura es dibujada. Las ya existentes se vuelven trans parentes. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 
lienzo.fillStyle="#990000"; 
lienzo.fillRect(100,100,300,100); 

lienzo.globalCompositeOperation="destination-atop"; 

lienzo.fillStyle="#AAAAFF"; 

lienzo.font="bold 80px verdana, sans-serif"; 
lienzo.textAlign="center"; 
lienzo.textBaseline="middle"; 
lienzo.fillText("PRUEBA",250,110); 

} 

window.addEventListener("load" , iniciar, false); 


Listado 7-21. Probando la propiedad globalCompositeOperation. 

Solo representaciones visuales de cada posible valor para la propiedad globalCompositeOperation le ayudaran 
a comprender como funcionan. Con este propósito, preparamos el código del Listado 7-21. Cuando este código es 
ejecutado, un rectangulo rojo es dibujado en el medio del lienzo, pero gracias al valor destination-atop solo la parte 
del rectangulo que se superpone con el texto es dibujada. 

Hagalo usted mismo: Reemplace el valor destination-atop con cualquiera de los demas valores posibles 
para esta propiedad ycompruebe el resultado en su navegador. Pruebe el código en distintos navegadores. 



7.3 Procesando imagenes 


API Canvas no seria nada sin la capacidad de procesar imagenes. Pero incluso cuando las imagenes son un elemento 
tan importante para una aplicación grafica, solo un metodo nativo fue provisto para trabajar eon ellas. 


drawlmage() 


El metodo drawimage () es el unico a cargo de dibujar una imagen en el lienzo. Sin embargo, este metodo puede 
recibir un numero de valores que producen diferentes resultados. Estudiemos estas posibilidades: 

drawlmage(imagen, x, y) Esta sintaxis es para dibujar una imagen en el lienzo en la posición declarada por x e y. 
El primervalores una referenda a la imagen que sera dibujada. 

drawlmagefimagen, x, y, ancho, alto) Esta sintaxis nos permite escalar la imagen antes de dibujarla en el lienzo, 
cambiando su tamańo eon los valores de los atributos ancho y alto. 

drawlmagefimagen, x1, yl, anchol, altol, x2, y2, ancho2, alto2) Esta es la sintaxis mas compleja. Hay dos 
valores para cada parametro. El propósito es cortar partes de la imagen y luego dibujarlas en el lienzo eon un 
tamańo y una posición especifica. Los valores xl e yl declaran la esquina superior izquierda de la parte de la 
imagen que sera cortada. Los valores anchol yaltol indican el tamańo de esta pieza. El resto de los valores 
(x2, y2, ancho2 y alto2) declaran el lugar donde la pieza sera dibujada en el lienzo y su nuevo tamańo (el cual 
puede ser igual o diferente al original). 

En cada caso, el primer atributo puede ser una referenda a una imagen en el mismo documento generada por 
metodos como getElementByld (), o creando un nuevo objęto imagen usando metodos regulares de Javascript. No 
es posible usar una URL o cargar un archivo desde una fuente externa directamente eon este metodo. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

var imagen=new Image(); 

imagen.src="http://www.minkbooks.com/content/snow.jpg"; 
imagen.addEventListener("load", function (){ 

lienzo.drawimage(imagen,20,20) 

}, false); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-22. Trabajando eon imagenes. 

Comencemos eon un simple ejemplo. El código del Listado 7-22 lo unico que hace es cargar la imagen y dibujarla 
en el lienzo. Debido a que el lienzo solo puede dibujar imagenes que ya estan completamente cargadas, necesitamos 
controlar esta situación escuchando al evento load. Agregamos una escucha para este evento y declaramos una 
función anonima para responder al mismo. El metodo drawimage () dentro de esta función dibujara la imagen cuando 
fue completamente cargada. 

Conceptos basicos: En el Listado 7-22, dentro del metodo addEventListener (), usamos una función anonima 
en lugar de una referenda a una función normal. En casos como este, cuando la función es pequeńa, esta tecnica 
vuelve al código mas simple yfacil de entender. Para aprender mas sobre este tema, vaya a nuestro sitio web y 
visite los enlaces correspondientes a este capltulo. 


function iniciar (){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

var imagen=new Image(); 

imagen.src="http://www.minkbooks.com/content/snow.jpg"; 
imagen.addEventListener("load", function (){ 

lienzo.drawimage(imagen,0,0,elemento.width,elemento.height) 

}, false); 





window.addEventListener("load", iniciar, false); 


Listado 7-23. Ajustando la imagen al tamańo del lienzo. 

En el Listado 7-23, agregamos dos valores al metodo drawimage() utilizado previamente para cambiar el tamańo 
de la imagen. Las propiedades width yheight retornan las medidas del lienzo, por lo que la imagen sera estirada por 
este código hasta cubrir el lienzo por completo. 


function iniciar (){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

var imagen=new Image(); 

imagen.src="http://www.minkbooks.com/content/snow.jpg"; 
imagen.addEventListener("load", function(){ 

lienzo.drawlmage(imagen,135,30,50,50,0,0,200,200) 

}, false); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-24. Extrayendo, cambiando el tamańo y dibujando. 

En el Listado 7-24 el código presenta la sintaxis mas compleja del metodo drawlmage (). Nueve valores fueron 
provistos para obtener una parte de la imagen original, cambiar su tamańo y luego dibujarla en el lienzo. Tomamos un 
cuadrado de la imagen original desde la posición 135,50, eon un tamańo de 50,50 pixeles. Este bloque es 
redimensionado a 200,200 pixeles yfinalmente dibujado en el lienzo en la posición 0,0. 


Datos de imagenes 


Cuando dijimos previamente que drawlmage () era el unico metodo disponible para dibujar imagenes en el lienzo, 
mentimos. Existen unos poderosos metodos para procesar imagenes en esta API que ademas pueden dibujarlas en el 
lienzo. Debido a que estos metodos no trabajan eon imagenes sino eon datos, nuestra declaración previa sigue siendo 
legitima. <j,Pero porque deseariamos procesar datos en lugarde imagenes? 

Toda imagen puede ser representada por una sucesión de numeros enteros representando valores rgba (cuatro 
valores para cada pixel). Un grupo de valores eon esta información resultara en un array unidimensional que puede ser 
usado luego para generar una imagen. La API Canvas ofrece tres metodos para manipular datos y procesar imagenes 
de este modo: 

getlmageData(x, y, ancho, alto) Este metodo toma un rectangulo del lienzo del tamańo declarado por sus 
atributos y lo convierte en datos. Retorna un objęto que puede ser luego accedido por sus propiedades width, 
height y data. 

putlmageData(datoslmagen, x, y) Este metodo convierte a los datos en datosimagen en una imagen y dibuja la 
imagen en el lienzo en la posición especificada por x e y. Este es el opuesto a getimageData (). 

createlmageDatafancho, alto) Este metodo crea datos para representar una imagen vacia. Todos sus pixeles 
seran de color negro transparente. Puede tambien recibir datos como atributo (en lugar de los atributos ancho 
yalto) y utilizar las dimensiones tomadas de los datos provistos para crear la imagen. 

La posición de cada valor en el array es calculada eon la formula (anchox 4 xy) + (xx4) . Este sera el primer valor del 
pixel (rojo); para el resto tenemos que agregar 1 al resultado (por ejemplo, (anchox4xy) + (xx4) +1 para verde, 
(anchox4xy) + (xx4)+2 para azul, y (anchox4xy) + (xx4) +3 para el valor alpha (transparencia). Veamos esto en 
practica: 

IMPORTANTE: Debido a restricciones de seguridad, no se puede extraer información del elemento <canvas> 
luego de que una imagen tornada desde una fuente externa fue dibujada en el lienzo. Solo cuando el documento y 
la imagen corresponden a la misma fuente (URL) el metodo getimageData () trabajara adecuadamente. Por 
este motivo, para probar este ejemplo tendra que descargar la imagen desde nuestro servidor en 
www.minkbooks.com/content/snow.jpg (o usar una imagen propia), y luego subir esta imagen, el archivo HTML y 
el archivo eon el código Javascript a su propio servidor. Si simplemente trata de ejecutar el siguiente ejemplo en 
su ordenador sin seguir los pasos previos, nofuncionara. 



function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

var imagen=new Image(); 
imagen.src="snow.jpg"; 

imagen.addEventListener("load", modificarimagen, false); 

} 

function modificarimagen(e){ 
imagen=e.target; 
lienzo.drawlmage(imagen, 0,0) ; 
var info=lienzo.getlmageData(0,0,175,262) ; 

var pos; 

for (x=0;x<=175;x++) { 
for(y=0;y<=262;y++){ 

pos=(info.width*4*y) + (x*4); 
info.data[pos]=255-info.data[pos]; 
info.data[pos+1]=255-info.data[pos+1]; 
info.data[pos+2]=255-info.data[pos+2]; 

} 

} 

lienzo.putlmageData(info,0,0); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-25. Generando un negativo de la imagen. 

Esta veztuvimos que crear una nueva función (en lugar de utilizar una función anonima) para procesar la imagen 
luego de que es cargada. Primero, la función modif icarimagen () genera una referenda a la imagen aprovechando la 
propiedad target usada en capitulos previos. En el siguiente paso, usando esta referenda y el metodo drawlmage (), 
la imagen es dibujada en el lienzo en la posición 0,0. No hay nada inusual en esta parte del código, pero eso es algo 
que pronto va a cambiar. 

IMPORTANTE: Los archivos para este ejemplo deben ser subidos a su propio servidor para trabajar 
correctamente (incluyendo la imagensnow.jpg que puede descargar desde 
www.minkbooks.com/content/snow.jpg). 

La imagen utilizada en nuestro ejemplo tiene un tamańo de 350 pixeles de ancho por 262 pixeles de alto, por lo que 
usando el metodo getlmageData () eon los valores 0,0 para la esquina superior izquierda y 175,262 para el valor 
horizontal y vertical, estamos extrayendo solo la mitad izquierda de la imagen original. Estos datos son grabados dentro 
de la variable info. 

Una vezque esta información fue recolectada, es momento de manipular cada pixel para obtener el resultado que 
queremos (en nuestro ejemplo esto sera un negativo de este trozo de la imagen). 

Debido a que cada color es declarado por un valor entre 0 y 255, el valor negativo es obtenido restando el valor real a 
255 eon la formula color=255-color. Para hacerlo eon cada pixel de la imagen, debemos crear dos bucles for (uno 
para las columnas yotro para las filas) para obtener cada color original ycalcularel valordel negativo correspondiente. 
El bucie for para los valores x va desde 0 a 175 (el ancho de la parte de la imagen que extrajimos del lienzo) y el for 
para los valores y va desde 0 a 262 (el tamańo vertical de la imagen y tambien el tamańo vertical del trozo de imagen 
que estamos procesando). 

Luego de que cada pixel es procesado, la variable info eon los datos de la imagen es enviada al lienzo como una 
imagen usando el metodo putlmageData (). La imagen es ubicada en la misma posición que la original, 
reemplazando la mitad izquierda de la imagen original porel negativo que acabamos de crear. 

El metodo getlmageData () retorna un objęto que puede ser procesado a traves de sus propiedades (width, 
height y data) o puede ser usado Integra por el metodo putlmageData (). 

Existe otrą manera de extraer datos del lienzo que retorna el contenido en una cadena de texto codificada en base64. 
Esta cadena puede ser usada luego como fuente para otro lienzo, como fuente de un elemento HTML (por ejemplo, 
<img>), o incluso ser enviado al servidor o grabado en un archivo. El siguiente es el metodo incluido eon este fin: 

toDataURL(tipo) El elemento <canvas> tiene dos propiedades, width y height, y dos metodos: getContext() y 
toDataURL(). Este ultimo metodo retorna datos en el formato data:url conteniendo una representación del 
contenido del lienzo en formato PNG (o el formato de imagen especificado en el atributo tipo). 



Mas adelante en este libro veremos algunos ejemplos de como usar toDataURL () y como puede ayudarnos a 
integrar esta API eon otras. 

Conceptos basicos: Los datos del tipo data:url son datos que son presentados en forma de cadena de texto y 
pueden ser incluidos en nuestros documentos como si se tratara de datos tomados de fuentes externas (por 
ejemplo, la fuente para imagenes insertadas eon la etiqueta <img>). Para mayor información, visite nuestro sitio 
web ysiga los enlaces correspondientes a este capitulo. 


Patrones 


Los patrones son simples adiciones que pueden mejorar nuestros trazados. Con esta herramienta podemos agregar 
textura a nuestras figuras utilizando una imagen. El procedimiento es similara la creación de gradientes; los patrones 
son creados porel metodo createPattern () yluego aplicados al trazado como si fuesen un color. 

createPatternfimagen, tipo) El atributo imagen es una referenda a la imagen que vamos a usar como patron, y 
tipo configura el patron por medio de cuatro valores: repeat, repeat-x, repeat-y yno-repeat. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

var imagen=new Image(); 

imagen.src="http://www.minkbooks.com/content/bricks.jpg"; 
imagen.addEventListener("load", modificarimagen, false); 

} 

function modificarimagen(e){ 
imagen=e.target; 

var patron=lienzo.createPattern(imagen,'repeat'); 
lienzo.fillStyle=patron; 

lienzo.fillRect(0,0,500,300); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-26. Agregando un patron para nuestro trazado. 

Hagalo usted mismo: Experimente con los diferentes valores disponibles para createPattern () y tambien 
utilizando otras figuras. 




7.4 Animaciones en el lienzo 


Las animaciones son creadas por código Javascript convencional. No existen metodos para ayudarnos a animar 
figuras en el lienzo, y tampoco existe un procedimiento predeterminado para hacerlo. Basicamente, debemos borrar el 
area del lienzo que queremos animar, dibujar las figuras y repetir el proceso una y otrą vez. Una vezque las figuras son 
dibujadas no se pueden mover. Solo borrando el area y dibujando las figuras nuevamente podemos construir una 
animación. Por esta razón, en juegos o aplicaciones que requieren grandes cantidades de objetos a ser animados, es 
mejor usar imagenes en lugar de figuras construidas eon trazados complejos (por ejemplo, juegos normalmente 
utilizan imagenes PNG, que ademas son utiles por su capacidad de transparencia). 

Existen multiples tecnicas para lograr animaciones en el mundo de la programación. Algunas son simples yotras 
tan complejas como las aplicaciones para las que fueron creadas. Vamos a ver un ejemplo simple utilizando el metodo 
clearRect () para limpiar el lienzo y dibujar nuevamente, generando una animación eon solo una función, pero 
siempre reeuerde que si su intención es crear elaborados efectos probablemente debera adquirir un libro de 
programación avanzada en Javascript antes de siguiera intentarlo. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

window.addEventListener('mousemove', animación, false); 

} 

function animación(e){ 

lienzo.clearRect(0,0,300,500) ; 

var xraton=e.clientX; 
var yraton=e.clientY; 
var xcentro=220; 
var ycentro=150; 

var angulo=Math.atan2(xraton-xcentro,yraton-ycentro); 
var x=xcentro+Math.round(Math.sin(angulo)*10) ; 
var y=ycentro+Math.round(Math.cos(angulo)*10); 

lienzo.beginPath(); 

lienzo.arc(xcentro,ycentro,20,0,Math.PI*2, false); 
lienzo.moveTo(xcentro+70,150) ; 

lienzo.arc(xcentro+50,150,20,0,Math.PI*2, false); 
lienzo.stroke(); 

lienzo.beginPath() ; 

lienzo.moveTo(x+10, y) ; 

lienzo.arc(x,y,10,0,Math.PI*2, false); 

lienzo.moveTo(x+60, y) ; 

lienzo.arc(x+50,y,10,0,Math.PI*2, false); 
lienzo.fili (); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-27. Nuestra primera animación. 

El código en el Listado 7-27 mostrara dos ojos en pantalla que miran al puntero del ratón todo el tiempo. Para mover 
los ojos, debemos actualizar su posición cada vez que el ratón es movido. Por este motivo agregamos una escucha 
para el evento mousemove en la función iniciar (). Cada vezque el puntero del ratón cambia de posición, el evento es 
disparado yla función animacion() es llamada. 

La función animación () comienza limpiando el lienzo eon la instrucción clearRect(0,0,300,500) . Luego, la 
posición del puntero del ratón es capturada (usando las viejas propiedades clientx y clientY) y la posición del 
primer ojo es grabada en las variables xcentro e ycentro. 

Luego de que estas variables son inicializadas, es tiempo de comenzar eon las matematicas. Usando los valores 
de la posición del ratón yel centro del ojo izquierdo, calculamos el angulo de la Ifnea invisible que va desde un punto al 
otro usando el metodo predefinido atan2. Este angulo es usado en el siguiente paso para calcular el punto exacto del 
centro del iris del ojo izquierdo eon la formula xcentro + Math. round (Math. sin (angulo) x 10) . El numero 10 en 
la formula representa la distancia desde el centro del ojo al centro del iris (porque el iris no esta en el centro del ojo, 
esta siempre sobre el borde). 



Con todos estos valores podemos finalmente comenzar a dibujar nuestros ojos en el lienzo. El primer trazado es 
para los dos clrculos representando los ojos. El primer metodo arc () para el primer ojo es posicionado en los valores 
xcentro yycentro, y el circulo para el segundo ojo es generado 50 pixeles hacia la derecha usando la instrucción 
arc(xcentro+50, 150, 20, 0, Math.PI*2, false). 

La parte animada del grafico es creada a continuación con el segundo trazado. Este trazado usa las variables x e y 
con la posición calculada previamente a partir del angulo. Ambos iris son dibujados como un circulo negro sólido 
usando fili (). 

El proceso sera repetido y los valores recalculados cada vezque el evento mousemove es disparado. 

Hagalo usted mismo: Copie el código del Listado 7-27 en el archivo Javascript canvas. js y abra el archivo HTML 
con la plantilla del Listado 7-1 en su navegador. 



7.5 Procesando video en el lienzo 


Al igual que para animaciones, no hay ningun metodo especial para mostrar video en el elemento <canvas>. La unica 
manera de hacerlo es tomando cada cuadro del video desde el elemento <video> y dibujarlo como una imagen en el 
lienzo usando drawimage (). Asi que basicamente, el procesamiento de video en el lienzo es hecho eon la combinación 
de tecnicas ya estudiadas. 

Construyamos una nueva plantilla ylos códigos para verde que estamos hablando. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Video en el Lienzo</title> 

<style> 

.caj as{ 

display: inline-block; 
margin: 10px; 
padding: 5px; 

border: lpx solid #999999; 

} 

</style> 

<script src="canvasvideo. j s"X/script> 

</head> 

<body> 

<section class="cajas"> 

<video id="medio" width="483" height="272"> 

<source src="http://www.minkbooks.com/content/trailer2.mp4"> 
<source src="http://www.minkbooks.com/content/trailer2.ogg"> 
</video> 

</section> 

<section class="cajas"> 

<canvas id="lienzo" width="483" height="272"> 

Su navegador no soporta el elemento canvas 
</canvas> 

</section> 

</body> 

</html> 


Listado 7-28. Plantilla para reproducir video en el lienzo. 

La plantilla en el Listado 7-28 incluye dos componentes especificos: el elemento <video> y el elemento <canvas>. 
Con la combinación de ambos vamos a procesar y mostrar video en el lienzo. 

La plantilla tambien incluye estilos CSS embebidos para las cajas yun archivo Javascript llamado canvasvideo. js 
para el siguiente código: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d') ; 
video=document.getElementByld('medio'); 
video.addEventListener('click', presionar, false); 

} 

function presionar(){ 

if(!video.paused && !video.ended){ 
video.pause(); 

window.elearInterval(bucie); 

}else{ 

video.play(); 

bucle=setlnterval(procesarCuadros, 33); 

} 

} 

function procesarCuadros(){ 
lienzo.drawimage(video, 0,0) ; 



var info=lienzo.getlmageData(0,0,483,272); 
var pos; 
var gris; 

for (x=0;x<=483;x++) { 
for(y=0;y<=272;y++){ 

pos=(info.width*4*y)+(x*4); 
gris=parselnt(info.data[pos]*0.2989 + 

info.data[pos+1]*0.5870 + info.data[pos+2]*0.1140); 
info.data[pos]=gris; 
info.data[pos+1]=gris; 
info.data[pos+2]=gris; 

} 

} 

lienzo.putlmageData(info,0,0); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-29. Video color convertido en blanco y negro. 

Hagalo usted mismo: Cree un nuevo archivo HTML eon el código del Listado 7-28 y un archivo Javascript llamado 
canvasvideo. js eon el código del Listado 7-29. Para comenzar a reproducir el video, haga clic en la caja 
izquierda en la pantalla. 

IMPORTANTE: Este ejemplo usa los metodos getlmageData() yputimageData () para procesar datos de 
imagen. Como explicamos anteriormente, estos metodos extraen información del lienzo. Debido a restricciones 
de seguridad, la extracción de información desde el lienzo es desactivada luego de que el elemento recibe 
contenido desde un origen que no es el origen del documento que lo creó (el documento pertenece a un dominio 
y el video a otro). Por lo tanto, para probar este ejemplo, debera descargar el video desde nuestro sitio web (o usar 
el suyo propio)yluego subircada uno de los archivos a su servidor. 

Estudiemos por un momento el código del Listado 7-29. Como dijimos previamente, para procesar video en el 
lienzo, simplemente debemos recurrir a códigos y tecnicas ya vistas. En este código estamos usando la función 
presionar () tornada del Capftulo 5 para comenzar y detener la reproducción del video haciendo clic sobre el mismo. 
Tambien creamos una función llamada procesarCuadros ( ) que esta usando el mismo código del Listado 7-25 de 
este capitulo, excepto que esta vez en lugar de invertir la imagen estamos usando una formula para transformar todos 
los colores de cada cuadro del video en el correspondiente gris. Esto convertira nuestro video color en un video blanco y 
negro. 

La función presionar () cumple eon dos propósitos: comenzar o detener la reproducción del video e iniciar un 
intervalo que ejecutara la función procesarCuadros () cada 33 milisegundos. Esta función toma un cuadro del 
elemento <video> y lo dibuja en el lienzo eon la instrucción drawimage (video,0,0) . Luego los datos son extraidos 
del lienzo eon el metodo getlmageData () y cada pixel de ese cuadro es procesado por medio de dos bucles for 
(como lo hicimos en un ejemplo anterior). 

El proceso utilizado para convertir cada uno de los colores que integran cada pixel en su correspondiente gris es 
uno de los mas populares y faciles de encontrar en Internet. La formula es la siguiente: rojo x 0.2989 + verde x 
0.5870 + azul x 0.1140. Luego de que la formula es calculada, el resultado debe ser asignado a cada color del 
pixel (rojo, verde yazul), como lo hicimos en el ejemplo usando la variable gris. 

El proceso termina cuando dibujamos nuevamente el cuadro modificado en el lienzo usando el metodo 
putlmageData(). 

IMPORTANTE: Este ejemplo es eon propósitos didacticos. Procesar video en tiempo real del modo en que lo 
hicimos no es una practica recomendada. Dependiendo de la configuración de su ordenadoryel navegador que 
use para correr la aplicación, probablemente notę algunas demoras en el proceso. Para crear aplicaciones 
Javascript utiles, siempre debe considerar su rendimiento. 



7.6 Referenda rapida 


La API Canvas es probablemente la mas compleja y extensa de todas las APls incluidas dentro de la especificación 
HTML5. Provee varios metodos ypropiedades para crear aplicaciones graficas sobre el elemento <canvas>. 


Metodos 


Estos metodos son especificos de la API Canvas: 

getContext(contexto) Este metodo crea el contexto para el lienzo. Puede tomar dos valores: 2d y 3d para graficos 
en 2 y3 dimensiones. 

fillRect(x, y, ancho, alto) Este metodo dibujara un rectangulo sólido directamente en el lienzo en la posición 
indicada porx,y yel tamańo ancho,alto. 

strokeRect(x, y, ancho, alto) Este metodo dibujara un rectangulo vacio (solo el contorno) directamente en el lienzo 
en la posición indicada por x,y y el tamańo ancho,alto. 

clearRect(x, y, ancho, alto) Este metodo borra un area en el lienzo usando una figura rectangular declarada por 
los valores de sus atributos. 

createLinearGradient(x1, yl, x2, y2) Este metodo crea un gradiente lineal para asignarlo a una figura como si 
fuese un color usando la propiedad filistyle. Sus atributos solo especifican las posiciones de comienzo y 
finał del gradiente (relativas al lienzo). Para declarar los colores involucrados en el gradiente, este metodo 
debe ser usado en combinación eon addColorStop (). 

createRadialGradient(x1, yl, rl, x2, y2, r2) Este metodo crea un gradiente radial para asignarlo a una figura como 
si fuese un color usando la propiedad filistyle. El gradiente es construido por medio de dos circulos. Los 
atributos solo especifican la posición y radio de los circulos (relativos al lienzo). Para declarar los colores 
involucrados en el gradiente, este metodo debe ser usado en combinación eon addColorStop (). 

addColorStop(posición, color) Este metodo es usado para declarar los colores para el gradiente. El atributo 
posición es un valor entre 0.0 y 1.0, usado para determinar dónde el color comenzara la degradación. 

beginPath() Este metodo es requerido para comenzar un nuevo trazado. 

closePath() Este metodo puede ser usado al finał de un trazado para cerrarlo. Generara una linea recta desde la 
ultima posición del lapiz hasta el punto donde el trazado comenzó. No es necesario usareste metodo cuando 
el trazado debe permanecer abierto o es dibujado en el lienzo usando fili (). 

stroke() Este metodo es usado para dibujar un trazado como una figura vacia (solo el contorno). 

fill() Este metodo es usado para dibujar un trazado como una figura solida. 

clip() Este metodo es usado para crear una mascara a partir de un trazado. Todo lo que sea enviado al lienzo 
luego de que este metodo es declarado sera dibujado solo si cae dentro de la mascara. 

moveTo(x, y) Este metodo mueve el lapizvirtual a una nueva posición para continuarel trazado desde ese punto. 

lineTo(x, y) Este metodo agrega lineas rectas al trazado desde la posición actual del lapiz hasta el punto indicado 
por los atributos x e y. 

rect(x, y, ancho, alto) Este metodo agrega un rectangulo al trazado en la posición x,y y eon un tamańo 
determinado por ancho,alto. 

arc(x, y, radio, angulo inicio, angulo finał, dirección) Este metodo agrega un arco al trazado. El centro del arco es 
determinado porx e y, los angulos son definidos en radianes, y la dirección es un valor booleano para 
determinar si el arco sera dibujado en el mismo sentido o el opuesto a las agujas del reloj. Para convertir 
grados en radianes, use la formula: Math.Pi/180xgrados. 

quadraticCurveTo(cpx, cpy, x, y) Este metodo agrega una curva Bezier cuadratica al trazado. Comienza desde la 
posición actual del lapizytermina en el punto x,y. Los atributos cpxycpy especifican la posición del punto de 
control que dara forma a la curva. 

bezierCurveTo(cp1x, cply, cp2x, cp2y, x, y) Este metodo agrega una curva Bezier cubica al trazado. Comienza 
desde la posición actual del lapizytermina en el punto x,y. Los atributos cplx, cply, cp2x, ycp2y especifican 
la posición de los dos puntos de control que daran forma a la curva. 

strokeText(texto, x, y, maximo) Este metodo dibuja un texto vacio (solo el contorno) directamente en el lienzo. El 
atributo maximo es opcional y determina el maximo tamańo del texto en pixeles. 



fillText(texto, x, y, maximo) Este metodo dibuja un texto sólido directamente en el lienzo. El atributo maximo es 
opcional ydetermina el maximo tamańo del texto en pixeles. 

measureText(texto) Este metodo calcula el tamańo del area que un texto ocupara en el lienzo usando los estilos 
vigentes. La propiedad widthes usada para retornarel valor. 

translate(x, y) Este metodo mueve el origen del lienzo al puntox,y. La posición inicial del origen (0,0) es la 
esquina superior izquierda del area generada por el elemento <canvas>. 

rotate(angle) Este metodo es usado para rotar el lienzo alrededor del origen. El angulo debe ser declarado en 
radianes. Para convertir grados en radianes, use la formula: Math.Pi/180xgrados. 

scale(x, y) Este metodo cambia la escala del lienzo. Los valores por defecto son (1.0, 1.0). Los valores provistos 
pueden ser negativos. 

transform(m1, m2, m3, m4, dx, dy) Este metodo modifica la matrizde transformación del lienzo. La nueva matriz 
es calculada sobre la anterior. 

setTransform(m1, m2, m3, m4, dx, dy) Este metodo modifica la matrizde transformación del lienzo. Reinicia los 
valores anteriores ydeclara los nuevos. 

save() Este metodo graba el estado del lienzo, incluyendo la matrizde transformación, propiedades de estilo y la 
mascara. 

restore() Este metodo restaura el ultimo estado del lienzo grabado, incluyendo la matriz de transformación, 
propiedades de estilo yla mascara. 

drawlmage() Esta metodo dibujara una imagen en el lienzo. Existen tres sintaxis posibles. La sintaxis 
drawimage (imagen,x,y ) dibuja la imagen en la posición x,y. La sintaxis 

drawimage (imagen,x,y,ancho,alto) dibuja la imagen en la posición x,y eon un nuevo tamańo declarado 
por ancho,alto. Yla sintaxis drawimage (imagen, xl, yl, anchol, altol, x2 , y2 , ancho2 , alto2) 
toma una porción de la imagen original determinada por xl,yl,anchol,altol yla dibuja en el lienzo en la 
posición x2 ,y2 y el nuevo tamańo ancho2 ,alto2. 

getlmageData(x, y, ancho, alto) Este metodo toma una porción del lienzo y la graba como datos en un objęto. Los 
valores del objęto son accesibles a traves de las propiedades width, height ydata. Las primeras dos 
propiedades retornan el tamańo de la porción de la imagen tornada, ydata retorna la información como un 
array eon valores representando los colores de cada pixel. Este valor puede ser accedido usando la formula 

(anchox4xy) + (xx4). 

putlmageData(datoslmagen, x, y) Este metodo dibuja en el lienzo la imagen representada por la información en 
datosImagen. 

createlmageDatafancho, alto) Este metodo crea una nueva imagen en fermato de datos. Todos los pixeles son 
inicializados en color negro transparente. Puede tomar datos de imagen como atributo en lugar de ancho y 
alto. En este caso la nueva imagen tendra el tamańo determinado por los datos provistos. 

createPatternfimagen, tipo) Este metodo crea un patron desde una imagen que luego podrą serasignado a una 
figura usando la propiedad filistyle. Los valores posibles para el atributo tipo son repeat, repeat-x, 
repeat-y y no-repeat. 


Propiedades 


La siguiente lista de propiedades es especifica para la API Canvas: 

strokeStyle Esta propiedad declara el color para las lineas de las figuras. Puede recibir cualquier valor CSS, 
incluidas funciones como rgb() yrgba(). 

fillStyle Esta propiedad declara el color para el interior de figuras sólidas. Puede recibir cualquier valor CSS, 
incluidas funciones como rgb() yrgba(). Es tambien usada para asignar gradientes y patrones a figuras 
(estos estilos son primero asignados a una variable y luego esa variable es declarada como el valor de esta 
propiedad). 

globalAlpha Esta propiedad es usada para determinar el nivel de transparencia de las figuras. Recibe valores 
entre 0.0 (completamente opaco) y 1.0 (completamente transparente). 

lineWidth Esta propiedad especifica el grosor de la linea. Por defecto el valor es 1.0. 

lineCap- Esta propiedad determina la forma de la terminación de las lineas. Se pueden utilizartres valores:butt 
(terminación normal), round (termina la linea eon un semicirculo) y sguare (termina la linea eon un cuadrado). 



lineJoin Esta propiedad determina la forma de la conexión entre lineas. Se pueden utilizartres valores: round (la 
unión es redondeada), bevel (la unión es cortada) ymiter (la unión es extendida hasta que ambas lineas 
alcanzan un punto en comun). 

miterLimit Esta propiedad determina cuanto se extenderan las lineas cuando la propiedad lineJoin es 
declarada como mi ter. 

font Esta propiedad es similar a la propiedad font de CSS y utiliza la misma sintaxis para declarar los estilos del 
texto. 

textAlign Esta propiedad determina como el texto sera alineado. Los posibles valores son start, end, left, 
right y center. 

textBaseline Esta propiedad determina el alineamiento vertical para el texto. Los posibles valores son: top, 
hanging, middle, alphabetic, ideographic ybottom. 

shadowColor Esta propiedad establece el color para la sombra. Utiliza valores CSS. 

shadowOffsetX Esta propiedad declara la distancia horizontal entre la sombra yel objęto. 

shadowOffsetY Esta propiedad declara la distancia vertical entre la sombra yel objęto. 

shadowBIur Esta propiedad recibe un valor numerico para generar un efecto de difuminación para la sombra. 

globalCompositeOperation Esta propiedad determina como las nuevas figuras seran dibujadas en el lienzo 
considerando las figuras ya existentes. Puede recibir varios valores: source-over, source-in, source-out, 
source-atop, lighter, xor, destination-over, destination-in, destination-out, destination- 
atop, darker ycopy. El valor por defecto es source-over, lo que significa que las nuevas formas son 
dibujadas sobre las anteriores. 




Capitulo 8 
API Drag and Drop 


8.1 Arrastrar y soltar en laweb 

Arrastrar un elemento desde un lugar y luego soltarlo en otro es algo que hacemos todo el tiempo en aplicaciones de 
escritorio, pero ni siquiera imaginamos hacerlo en la web. Esto no es debido a que las aplicaciones web son diferentes 
sino porque desarrolladores nunca contaron eon una tecnologia estandar disponible para ofrecer esta herramienta. 

Ahora, gracias a la API Drag and Drop, introducida por la especificación HTML5, finalmente tenemos la oportunidad 
de crear software para la web que se comportara exactamente como las aplicaciones de escritorio que usamos desde 
siempre. 


Nuevos eventos 


Uno de los mas importantes aspectos de esta API es un conjunto de siete nuevos eventos introducidos para informar 
sobre cada una de las situaciones involucradas en el proceso. Algunos de estos eventos son disparados por la fuente 
(el elemento que es arrastrado) y otros son disparados por el destino (el elemento en el cual el elemento arrastrado 
sera soltado). Porejemplo, cuando el usuario realiza una operación de arrastrar y soltar, el elemento origen (el que es 
arrastrado) dispara estos tres eventos: 

dragstart Este evento es disparado en el momento en el que el arrastre comienza. Los datos asociados eon el 
elemento origen son definidos en este momento en el sistema. 

drag Este evento es similaral evento mousemove, excepto que sera disparado durante una operación de arrastre 
porel elemento origen. 

dragend Cuando la operación de arrastrar y soltar finaliza (sea la operación exitosa o no) este evento es 
disparado porel elemento origen. 

Yestos son los eventos disparados por el elemento destino (donde el origen sera soltado) durante la operación: 

dragenter Cuando el puntero del ratón entra dentro del area ocupada por los posibles elementos destino durante 
una operación de arrastrar y soltar, este evento es disparado. 

dragover Este evento es similar al evento mousemove, excepto que es disparado durante una operación de 
arrastre por posibles elementos destino. 

drop Cuando el elemento origen es soltado durante una operación de arrastrar y soltar, este evento es disparado 
porel elemento destino. 

dragleave Este evento es disparado cuando el ratón sale del area ocupada por un elemento durante una 
operación de arrastrar y soltar. Este evento es generalmente usado junto eon dragenter para mostrar una 
ayuda visual al usuario que le permita identificar el elemento destino (donde soltar). 

Antes de trabajar eon esta nueva herramienta, existe un aspecto importante que debemos considerar. Los 
navegadores realizan acciones pordefecto durante una operación de arrastrar y soltar. 

Para obtener el resultado que queremos, necesitamos prevenir en algunas ocasiones este comportamiento por 
defecto y personalizar las reacciones del navegador. Para algunos eventos, como dragenter, dragover ydrop, la 
prevención es necesaria, incluso cuando una acción personalizada ya fue especificada. 

Veamos como debemos proceder usando un ejemplo simple. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Drag and Drop</title> 

<link rel="stylesheet" href="dragdrop.css"> 
<script src="dragdrop. js"X/script> 

</head> 

<body> 

<section id="cajasoltar"> 

Arrastre y suelte la imagen aqur 


</section> 

<section id="cajaimagenes"> 

<img id="imagen" src="http://www.minkbooks.com/content/ 

monsterl.gif"> 

</section> 

</body> 

</html> 


Listado 8-1. Plantilla para la operación arrastrar y soltar. 

El documento HTML del Listado 8-1 incluye un elemento <section> identificado como cajasoltar y una imagen. 
El elemento <section> sera usado como elemento destino y la imagen sera el elemento a arrastrar. Tambien 
incluimos dos archivos para estilos CSS y el código javascript que se hara cargo de la operación. 


#caj asoltar{ 
float: left; 
width: 500px; 
height: 300px; 
margin: 10px; 

border: lpx solid #999999; 

} 

#caj aimagenes{ 
float: left; 
width: 320px; 
margin: 10px; 

border: lpx solid #999999; 

} 

#cajaimagenes > img{ 
float: left; 
padding: 5px; 

} 


Listado 8-2. Estilos para la plantilla fdiagdrop.ossj. 

Las reglas en el Listado 8-2 simplemente otorgan estilos a las cajas que nos serviran para identificar el elemento a 
arrastrar yel destino. 


function iniciar(){ 

origenl=document.getElementByld('imagen'); 

origenl.addEventListener('dragstart', arrastrado, false); 

destino=document.getElementByld('caj asoltar'); 
destino.addEventListener('dragenter', function (e){ 

e.preventDefault(); }, false); 
destino.addEventListener('dragover', function (e){ 

e.preventDefault(); }, false); 
destino.addEventListener('drop', soltado, false); 

} 

function arrastrado(e){ 

var codigo='<img src="'lorigenl.getAttribute('src')+'">'; 
e.dataTransfer.setData('Text', codigo); 

} 

function soltado(e){ 
e.preventDefault(); 

destino.innerHTML=e.dataTransfer.getData('Text'); 

} 

window.addEventListener('load', iniciar, false); 


Listado 8-3. Código elemental para una operación arrastrary soltar. 

Existen algunos atributos que podemos usaren los elementos HTML para configurar el proceso de una operación 
arrastrar y soltar, pero basicamente todo puede serhecho desde código Javascript. En el Listado 8-3, presentamos tres 
funciones: la función iniciar () agrega las escuchas para los eventos necesarios en esta operación, ylas funciones 








arrastrado() ysoltado() generan yreciben la información que es transmitida poreste proceso. 

Para que una operación arrastrar y soltar se realice normalmente, debemos preparar la información que sera 
compartida entre el elemento origen y el elemento destino. Para lograr esto, una escucha para el evento dragstart fue 
agregada. La escucha llama a la fu n ci ón arras trado () cuando el evento es disparado y la información a ser 
compartida es preparada en esta función usando setData (). 

La operación soltar no es normalmente permitida en la mayoria de los elementos de un documento por defecto. Por 
este motivo, para hacer esta operación disponible en nuestro elemento destino, debemos prevenir el comportamiento 
por defecto del navegador. Esto fue hecho agregando una escucha para los eventos dragenter ydragover y 
ejecutando el metodo preventDefault () cuando son disparados. 

Finalmente, una escucha para el evento drop fue agregada para llamar a la función soltado () que recibira y 
procesara los datos enviados porel elemento origen. 

Conceptos basicos: Para responder a los eventos dragenter ydragover usamos una función anonima y 
llamamos en su interior al metodo preventDefault () que cancela el comportamiento por defecto del 
navegador. La variable e fue enviada para referenciar al evento dentro de la función. Para obtener mas información 
acerca de funciones anónimas, visite nuestro sitio web ysiga los enlaces correspondientes a este capitulo. 

Cuando el elemento origen comienza a ser arrastrado, el evento dragstart es disparado y la función 
arras trado () es llamada. En esta función obtenemos el valor del atributo src del elemento que esta siendo 
arrastrado y declaramos los datos que seran transferidos usando el metodo setData () del objęto dataTransfer. 
Desde el otro lado, cuando un elemento es soltado dentro del elemento destino, el evento drop es disparado y la 
función soltado () es llamada. Esta función modifica el contenido del elemento destino eon la información obtenida 
por el metodo getData (). Los navegadores tambien realizan acciones por defecto cuando estos eventos son 
disparados (por ejemplo, abrir un enlace o actualizar la ventana para mostrar la imagen que fue soltada) por lo que 
debemos prevenir este comportamiento usando el metodo preventDefault (), como ya hicimos para otros eventos 
anteriormente. 

Hagalo usted Mismo: Cree un archivo HTML eon la plantilla del Listado 8-1, un archivo CSS llamado 
dragdrop.css eon los estilos del Listado 8-2, y un archivo Javascript llamado dragdrop. js eon el código del 
Listado 8-3. Para probarel ejemplo, abra el archivo HTML en su navegadoryarrastre la imagen hacia el cuadro de 
la izguierda. 


dataTransfer 


Este es el objęto que contendra la información en una operación arrastrar y soltar. El objęto dataTransfer tiene varios 
metodos ypropiedades asociados. Ya utilizamos los metodos setData () y getData () en nuestro ejemplo del Listado 
8-3. Junto eon clearData (), estos son los metodos a cargo de la información que es transferida: 

setDataftipo, dato) Este metodo es usado para declarar los datos a ser enviados y su tipo. El metodo puede 
recibir tipos de datos regulares (como text/plain, text/html o text/uri-list), tipos de datos 
especiales (como URL o Text) o incluso tipos de datos personalizados. Un metodo setData () debe ser 
llamado por cada tipo de datos que queremos enviar en la misma operación. 

getData(tipo) Este metodo retorna los datos enviados porel origen, pero solo del tipo especificado. 

clearDataf) Este metodo remueve los datos del tipo especificado. 

En la función arrastrado () del Listado 8-3, creamos un pequeńo código HTML que incluye el valor del atributo src 
del elemento que comenzó a ser arrastrado, grabamos este código en la variable codigo y luego enviamos esta 
variable como el dato a ser transferido usando el metodo setData (). Debido a que estamos enviando texto, 
declaramos el tipo de dato como Text. 

IMPORTANTE: Podriamos haber usado un tipo de datos mas apropiado en nuestro ejemplo, como text/html o 
incluso un tipo personalizado, pero varios navegadores solo admiten un numero limitado de tipos en este 
momento, por lo que el tipo Text hace a nuestra pequeńa aplicación mas compatible y la deja lista para ser 
ejecutada. 

Cuando recuperamos los datos en la función soltado () usando el metodo getData (), tenemos que especificar el 
tipo de datos a ser lefdo. Esto es debido a que diferentes clases de datos pueden ser enviados por el mismo elemento. 
Por ejemplo, una imagen podrla enviar la imagen misma, la URL y un texto describiendo la imagen. Toda esta 
información puede ser enviada usando varias declaraciones desetData() eon diferentes tipos de valores y luego 
recuperada por getData () especificando los mismo tipos. 

IMPORTANTE: Para obtener mayor información acerca de tipos de datos para la operación arrastrar y soltar, visite 
nuestro sitio web ysiga los enlaces correspondientes a este capitulo. 


El objęto dataTransfer tiene algunos metodos y propiedades mas que a veces podrian resultar util para nuestras 
aplicaciones: 

setDraglmagefelemento, x, y) Algunos navegadores muestran una imagen en miniatura junto al puntero del ratón 
que representa al elemento que esta siendo arrastrado. Este metodo es usado para personalizar esa imagen 
y seleccionar la posición la posición en la que sera mostrada relativa al puntero del ratón. Esta posición es 
determinada por los atributos x e y. 

types Esta propiedad retorna un array conteniendo los tipos de datos que fueron declarados durante el evento 
dragstart (por el código o el navegador). Podemos grabar este array en una variable 
(lista=dataTransfer. types) yluego leerlo eon un bucie for. 

files Esta propiedad retorna un array conteniendo información acerca de los archivos que estan siendo 
arrastrados. 

dropEffect Esta propiedad retorna el tipo de operación actualmente seleccionada. Los posibles valores son nonę, 
copy, link ymove. 

effectAllowed Esta propiedad retorna los tipos de operaciones que estan permitidas. Puede ser usada para 
cambiar las operaciones permitidas. Los posibles valores son: nonę, copy, copyLink, copyMove, link, 
linkMove, move, all y uninitialized. 

Aplicaremos algunos de estos metodos ypropiedades en los siguientes ejemplos. 


dragenter, dragleave y dragend 


Nada fue hecho aun eon el evento dragenter. Solo cancelamos el comportamiento por defecto de los navegadores 
cuando este evento es disparado para prevenir efectos no deseados. Ytampoco aprovechamos los eventos dragleave 
y dragend. Estos son eventos importantes que nos permitiran ayudar al usuario cuando se eneuentra arrastrando 
objetos por la pantalla. 


function iniciar(){ 

origenl=document.getElementByld('imagen'); 

origenl.addEventListener('dragstart', arrastrado, false); 

origenl.addEventListener('dragend', finalizado, false); 

soltar=document.getElementByld('caj asoltar'); 

soltar.addEventListener('dragenter', entrando, false); 
soltar.addEventListener('dragleave', saliendo, false); 

soltar.addEventListener('dragover', function (e){ 

e.preventDefault(); }, false); 
soltar.addEventListener('drop', soltado, false); 

} 

function entrando(e){ 
e.preventDefault(); 

soltar.style,background='rgba(0,150,0,.2)'; 


function saliendo(e){ 
e.preventDefault(); 
soltar.style.background='#FFFFFF'; 

} 

function finalizado(e){ 
elemento=e.target; 

elemento.style.visibility='hidden'; 

} 

function arrastrado(e){ 

var codigo='<img src="'forigenl.getAttribute('sre')+'">'; 
e.dataTransfer.setData('Text', codigo); 

} 

function soltado(e){ 
e.preventDefault(); 
soltar.style.background='#FFFFFF'; 
soltar.innerHTML=e.dataTransfer.getData('Text'); 



window.addEventListener('load', iniciar, false); 


Listado 8-4. Controlando todo el proceso de arrastrar y soltar. 

El código Javascript del Listado 8-4 reemplaza al código del Listado 8-3. En este nuevo ejemplo, agregamos dos 
funciones para el elemento destino y una para el elemento origen. Las funciones entrando() ysaliendo() 
cambiaran el color de fondo del elemento destino cada vez que el puntero del ratón este arrastrando un objęto y entre o 
salga del area ocupada por este elemento (estas acciones disparan los eventos dragenter y dragleave). Ademas, la 
función finalizado () sera llamada por la escucha del evento dragend cuando el objęto arrastrado es soltado. Notę 
que este evento o la función misma no controlan si el proceso fue exitoso o no. Este control lo deberemos hacer 
nosotros en el código. 

Gracias a los eventos yfunciones agregadas, cada vezque el ratón arrastra un objęto yentra en el area del elemento 
destino, este elemento se volvera verde, y cuando el objęto es soltado la imagen original es borrada de la pantalla. 
Estos cambios visibles no estan afectando el proceso de arrastrar ysoltar, pero si estan ofreciendo una gula clara para 
el usuario durante la operación. 

Para prevenir acciones por defecto del navegador, tenemos que usar el metodo preventDefault () en cada 
función, incluso cuando acciones personalizadas fueron declaradas. 

Hagalo usted mismo: Copie el código del Listado 8-4 dentro del archivo Javascript, abra el documento HTML del 
Listado 8-1 en su navegador, y arrastre la imagen que aparece en la pantalla dentro de la caja ubicada a su 
izguierda. 


Seleccionando un origen valido 


No existe ningun metodo espedfico para detectar si el elemento origen es valido o no. No podemos confiar en la 
información retornada por el metodo getData () porque incluso cuando podemos recuperar solo los datos del tipo 
especificado, otras fuentes podrlan originar el mismo tipo y proveer datos que no esperabamos. Hay una propiedad del 
objęto dataTransfer llamada types que retorna un array eon la lista de tipos configurados durante el evento 
dragstart, pero tambien es inutil para propósitos de validación. 

Poresta razón, las tecnicas para seleccionar y validar los datos transferidos en una operación arrastrar y soltar son 
variados, ypueden sertan simples o complejos como necesitemos. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Drag and Drop</title> 

clink rel="stylesheet" href="dragdrop.css"> 

<script src="dragdrop . j s"X/script> 

</head> 

<body> 

<section id="cajasoltar"> 

Arrastre y suelte las imagenes aqui 
</section> 

<section id="cajaimagenes"> 

<img id="imagenl" 

src="http://www.minkbooks.com/content/monsterl.gif"> 
cimg id="imagen2" 

src="http://www.minkbooks.com/content/monster2.gif"> 
<img id="imagen3" 

src="http://www.minkbooks.com/content/monster3.gif"> 
cimg id="imagen4" 

src="http://www.minkbooks.com/content/monster4.gif"> 

</section> 

</body> 

</html> 


Listado 8-5. Nueva plantilla eon varias imagenes para arrastrar. 

Usando la nueva plantilla HTML del Listado 8-5 vamos a filtrar los elementos a ser soltados dentro del elemento 
destino controlando el atributo id de la imagen. El siguiente código Javascript indicara cual imagen puede ser soltada y 
cual no: 














function iniciar(){ 

var imagenes=document.ąuerySelectorAll('#cajaimagenes > img'); 
for(var i=0; i<imagenes.length; i++){ 

imagenes[i].addEventListener('dragstart', arrastrado, false); 

} 


soltar=document.getElementByld('caj asoltar'); 
soltar.addEventListener('dragenter', function (e){ 

e,preventDefault (); }, false); 
soltar.addEventListener('dragover', function (e){ 

e,preventDefault (); }, false); 
soltar.addEventListener('drop', soltado, false); 

} 

function arrastrado(e){ 
elemento=e.target; 

e.dataTransfer.setData('Text', elemento.getAttribute('id')); 

} 

function soltado(e){ 
e.preventDefault(); 

var id=e.dataTransfer.getData('Text'); 

if(id!="imagen4"){ 

var src=document.getElementByld(id).src; 
soltar.innerHTML='<img src="'+src+'">'; 

}else{ 

soltar.innerHTML='la imagen no es admitida'; 

} 

} 

window.addEventListener('load', iniciar, false); 


Listado 8-6. Enviando el valordel atributo id. 

No han cambiado muchas cosas en el Listado 8-6 de anteriores listados. En este código estamos usando el 
metodo ąuerySelectorAll () para agregar una escucha para el evento dragstart a cada imagen dentro del 
elemento cajaimagenes, enviando el valor del atributo id eon setData () cada vezque una imagen es arrastrada, y 
controlando el valorde id en la función soltado () para evitarque el usuario arrastre ysuelte la imagen eon el atributo 
igual a "imagen4" (el mensaje »i a im. g6 n no en admitida- es mostrado dentro del elemento destino cuando el usuario intenta 
arrastrar y soltar esta imagen en particular). 

Este es, por supuesto, un filtra extremadamente sencillo. Puede usar el metodo ąuerySelectorAll () en la función 
soltado () para controlarque la imagen recibida es una de las que se eneuentran dentro del elemento cajaimagenes, 
por ejemplo, o usar propiedades del objęto dataTransfer (como types o files), pero es siempre un proceso 
personalizado. En otras palabras, deberemos hacernos cargo nosotros mismos de realizareste control. 


setDraglmage() 


Cambiar la imagen en miniatura que es mostrada junto al puntero del ratón en una operación arrastrar y soltar puede 
parecer inutil, pero en ocasiones nos evitara dolores de cabeza. El metodo setDragimage () no solo nos permite 
cambiar la imagen sino tambien recibe dos atributos,x e y, para especificar la posición de esta imagen relativa al 
puntero. Algunos navegadores generan una imagen en miniatura por defecto a partir del objęto original que es 
arrastrado, pero su posición relativa al puntero del ratón es determinada por la posición del puntero cuando el proceso 
comienza. El metodo setDragimage () nos permite declarar una posición especffica que sera la misma para cada 
operación arrastrar y soltar. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Drag and Drop</title> 

<link rel="stylesheet" href="dragdrop.css"> 
<script src="dragdrop . j s"x/script> 

</head> 

<body> 

<section id="cajasoltar"> 




<canvas id="lienzo" width="500" height="300"x/canvas> 
</section> 

<section id="cajaimagenes"> 

<img id="imagenl" 

src="http://www.minkbooks.com/content/monsterl.gif"> 
<img id="imagen2" 

src="http://www.minkbooks.com/content/monster2.gif"> 
<img id="imagen3" 

src="http://www.minkbooks.com/content/monster3.gif"> 
<img id="imagen4" 

src="http://www.minkbooks.com/content/monster4.gif"> 
</section> 

</body> 

</html> 


Listado 8-7. <canvas> como elemento destino. 

Con el nuevo documento HTML del Listado 8-7 vamos a estudiar la importancia del metodo setDragimage () 
usando un elemento <canvas> como el elemento destino. 


function iniciar(){ 

var imagenes=document.ąuerySelectorAll('#cajaimagenes > img'); 
for(var i=0; ikimagenes.length; i++){ 

imagenes[i].addEventListener('dragstart', arrastrado, false); 
imagenes[i].addEventListener('dragend', finalizado, false); 

} 

soltar=document.getElementByld('lienzo'); 
lienzo=soltar.getContext('2d'); 

soltar.addEventListener('dragenter', function (e){ 

e,preventDefault(); }, false); 
soltar.addEventListener('dragover', function (e){ 

e,preventDefault(); }, false); 
soltar.addEventListener('drop', soltado, false); 

} 

function finalizado(e){ 
elemento=e.target; 

elemento.style.visibility='hidden'; 

} 

function arrastrado(e){ 
elemento=e.target; 

e.dataTransfer.setData('Text', elemento.getAttribute('id')); 

e.dataTransfer.setDragimage(e.target, 0, 0) ; 

} 

function soltado(e){ 
e.preventDefault(); 

var id=e.dataTransfer.getData('Text'); 
var elemento=document.getElementByld(id); 

var posx=e.pageX-soltar.offsetLeft; 
var posy=e.pageY-soltar.offsetTop; 

lienzo.drawlmage(elemento,posx,posy); 

} 

window.addEventListener('load', iniciar, false); 


Listado 8-8. Una pequeńa aplicación para arrastrar y soltar. 

Probablemente, con este ejemplo, nos estemos acercando a lo que seria una aplicación de la vida real. El código 
del Listado 8-8 controlara tres diferentes aspectos del proceso. Cuando la imagen es arrastrada, la función 
arrastrado () es llamada y en su interior una imagen miniatura es generada con el metodo setDragimage (). El 
código tambien crea el contexto para trabajar con el lienzo ydibuja la imagen soltada usando el metodo drawlmage () 
estudiado en el capltulo anterior. Al finał de todo el proceso la imagen original es ocultada usando la función 
finalizado(). 








Para la imagen miniatura personalizada usamos el mismo elemento que esta siendo arrastrado, pero declaramos 
la posición relativa al puntero del ratón como 0,0. Gracias a esto ahora sabremos siempre cual es exactamente la 
ubicación de la imagen miniatura. Aprovechamos este dato importante dentro de la función soltado(). Usando la 
misma tecnica introducida en el capltulo anterior, calculamos dónde el objęto es soltado dentro del lienzo ydibujamos 
la imagen en ese lugar preciso. Si prueba este ejemplo en navegadores que ya aceptan el metodo setDragimage () 
(por ejemplo, Firefox 4+), vera que la imagen es dibujada en el lienzo exactamente en la posición de la imagen 
miniatura que acompana al puntero del ratón, haciendo facil para el usuario seleccionar el lugar adecuado donde 
soltarla. 

IMPORTANTE: El código en el Listado 8-8 usa el evento dragend para ocultar la imagen original cuando la 
operación termina. Este evento es disparado por el elemento origen cuando una operación de arrastre finaliza, 
incluso cuando no fue exitosa. En nuestro ejemplo la imagen sera ocultada en ambos casos, exito o fracaso. 
Usted debera crear los controles adecuados para actuar solo en caso de exito. 


Archivos 


Posiblemente la caracteristica mas interesante de la API Drag and Drop es la habilidad de trabajar eon archivos. La API 
no esta solo disponible dentro del documento, sino tambien integrada eon el sistema, permitiendo a los usuarios 
arrastrar elementos desde el navegador hacia otras aplicaciones y viceversa. Y normalmente los elementos mas 
requeridos desde aplicaciones externas son archivos. 

Como vimos anteriormente, existe una propiedad especial en el objęto dataTransfer que retornara un array 
conteniendo la lista de archivos que estan siendo arrastrados. Podemos usar esta información para construir 
complejos códigos que trabajan eon archivos o subirlos a un servidor. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Drag and Drop</title> 

clink rel="stylesheet" href="dragdrop.css"> 

<script src="dragdrop . j s"X/script> 

</head> 

<body> 

<section id="cajasoltar"> 

Arrastre y suelte archivos en este espacio 
</section> 

</body> 

</html> 


Listado 8-9. Plantilla simple para arrastrar archivos. 

El documento HTML del Listado 8-9 genera simplemente una caja para soltar los archivos arrastrados. Los archivos 
seran arrastrados desde una aplicación externa (por ejemplo, el Explorador de Archivos de Windows). Los datos 
provenientes de los archivos seran procesados porel siguiente código: 


function iniciar(){ 

soltar=document.getElementByld('caj asoltar'); 
soltar.addEventListener('dragenter', function (e){ 

e.preventDefault(); }, false); 
soltar.addEventListener('dragover', function (e){ 

e.preventDefault(); }, false); 
soltar.addEventListener('drop', soltado, false); 

} 

function soltado(e){ 
e.preventDefault(); 

var archivos=e.dataTransfer.fileś; 

var lista=''; 

for(var f=0;f<archivos.length;f++){ 

lista+='Archivo: '+archivos[f].name+' '+archivos[f].size+'<br>'; 

} 

soltar.innerHTML=lista; 



window.addEventListener('load', iniciar, false); 


Listado 8-10. Procesando los datos en la propiedad mes. 

La información retornada por la propiedad files del objęto dataTransfer puede ser grabada en una variable y 
luego leida por un bucie for. En el código del Listado 8-10, solo mostramos el nombre y el tamańo del archivo en el 
elemento destino usando las propiedades nameysize. Para aprovechar esta información y construir aplicaciones mas 
complejas, necesitaremos recurrir a otras APls ytecnicas de programación, como veremos mas adelante en este libro. 

Hagalo usted mismo: Cree nuevos archivos eon los códigos de los Listados 8-9 y 8-10, y abra la plantilla en su 
navegador. Arrastre archivos desde el Explorador de Archivos o cualquier otrą aplicación similar dentro del 
elemento destino. Luego de esta acción deberla ver en pantalla una lista eon el nombre y tamańo de cada archivo 
arrastrado. 



8.2 Referenda rapida 


La API Drag and Drop introduce eventos especificos, metodos ypropiedades para construir aplicaciones que incorporan 
la capacidad de arrastrarysoltarelementos en pantalla. 


Eventos 


Existen siete eventos para esta API: 

dragstart Este evento es disparado porel elemento origen cuando la operación de arrastre comienza. 

drag Este evento es disparado porel elemento origen mientras una operación de arrastre se esta realizando. 

dragend Este evento es disparado por el elemento origen cuando una operación de arrastre es terminada, ya sea 
porque la acción de soltarfue exitosa o porque la operación de arrastre fue cancelada. 

dragenter Este evento es disparado por el elemento destino cuando el puntero del ratón entra en el area ocupada 
por este elemento. Este evento siempre tiene que ser cancelado usando el metodo preventDefault (). 

dragover Este evento es disparado periódicamente por el elemento destino cuando el puntero del ratón esta 
sobre el. Este evento siempre tiene que ser cancelado usando el metodo preventDefault (). 

drop Este evento es disparado por el elemento destino cuando el elemento origen es soltado en su interior. Este 
evento siempre tiene que ser cancelado usando el metodo preventDefault (). 

dragleave Este evento es disparado por el elemento destino cuando el puntero del ratón sale del area ocupada 
por el mismo. 


Metodos 


La siguiente es una lista de los metodos mas importantes incorporados por esta API: 

setDataftipo, dato) Este metodo es usado para preparar los datos a ser enviados cuando el evento dragstart es 
disparado. El atributo tipo puede ser cualquier tipo de datos regular (como text/plain o text/html) o un 
tipo de datos personalizado. 

getData(tipo) Este metodo retorna los datos del tipo especificado. Es usado cuando un evento drop es disparado. 

clearData(type) Este metodo remueve los datos del tipo especificado. 

setDraglmagefelemento, x, y) Este metodo reemplaza la imagen en miniatura creada por el navegador en la 
operación arrastrar y soltar por una imagen personalizada. Tambien declara la posición que esta imagen 
tendra eon respecto al puntero del ratón. 


Propiedades 

El objęto dataTransfer, que contiene los datos transferidos en una operación arrastrar y soltar, tambien introduce 
algunas propiedades utiles: 

types Esta propiedad retorna un arraycon todos los tipos establecidos durante el evento dragstart. 

files Esta propiedad retorna un arraycon información acerca de los archivos que estan siendo arrastrados. 

dropEffect Esta propiedad retorna el tipo de operación actualmente seleccionada. Los valores posibles son: 
nonę, copy, link ymove. 

effectAllowed Esta propiedad retorna los tipos de operación que estan permitidos. Puede ser declarada para 
cambiar las operaciones permitidas. Los posibles valores son: nonę, copy, copyLink, copyMove, link, 
linkMove, move, all yuninitialized. 




Capitulo 9 
API Geolocation 


9.1 Encontrando su lugar 

La API Geolocation fue diseńada para que los navegadores puedan proveer un mecanismo de detección por defecto 
que permita a los desarrolladores determinar la ubicación flsica real del usuario. Previamente solo contabamos eon la 
opción de construir una gran base de datos eon información sobre direcciones IP y programar códigos exigentes dentro 
del servidor que nos darfan una idea aproximada de la ubicación del usuario (generalmente tan imprecisa como su 
pais). 

Esta API aprovecha nuevos sistemas, como triangulación de red y GPS, para retornar una ubicación precisa del 
dispositivo que esta accediendo a la aplicación. La valiosa información retornada nos permite construir aplicaciones 
que se adaptaran a las particulares necesidades del usuario o proveeran información localizada de forma automatica. 

Tres metodos especificos son provistos para usar la API: 

getCurrentPositionfubicación, error, configuración) Este es el metodo utilizado para consultas individuales. 
Puede recibir hasta tres atributos: una función para procesar la ubicación retornada, una función para procesar 
los errores retornados, y un objęto para configurar como la información sera adquirida. Solo el primer atributo 
es obligatorio para que el metodo trabaje correctamente. 

watchPositionfubicación, error, configuración) Este metodo es similar al anterior, excepto que comenzara un 
proceso de vigilancia para la detección de nuevas ubicaciones. Trabaja de forma similar que el conocido 
metodo setinterval () de Javascript, repitiendo el proceso automaticamente en determinados perfedos de 
tiempo de aeuerdo a la configuración por defecto o a los valores de sus atributos. 

clearWatch(id) El metodo watchPosition () retorna un valor que puede ser almacenado en una variable para 
luego ser usado como referenda pro el metodo clearWatch () yasi detener la vigilancia. Este metodo es 
similar a clearinterval () usado para detener los procesos comenzados por setinterval (). 


getCurrentPosition(ubicación) 


Como dijimos, solo el primer atributo es requerido para que trabaje correctamente el metodo getCurrentPosition (). 
Este atributo es una función que recibira un objęto llamado Position, el cual contiene toda la información retornada por 
los sistemas de ubicación. 

El objęto Position tiene dos atributos: 

coords Este atributo contiene un grupo de valores que establecen la ubicación del dispositivo y otros datos 
importantes. Los valores son accesibles a traves de siete atributos internos: latitude (latitud), longitude 
(longitud), altitude (altitud en metros), accuracy (exactitud en metros), altitudeAccuracy (exactitud de la 
altitud en metros), heading (dirección en grados) y speed (velocidad en metros porsegundo). 

timestamp Este atributo indica el momento en el que la información fue adquirida (en fermato timestamp). 

Este objęto, como dijimos, es pasado a la función que definimos como atributo del metodo 
getCurrentPosition () y luego sus datos son accedidos y procesados en esta función. Veamos un ejemplo practico 
de como usar este metodo: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Geolocation</title> 

<script src="geolocation. j s"X/script> 

</head> 

<body> 

<section id="ubicacion"> 

<button id="obtener">Obtener mi Ubicación</button> 
</section> 

</body> 

</html> 



Listado 9-1. Documento HTML para la API Geolocation. 

El Listado 9-1 sera nuestra plantilla HTML para el resto de este capitulo. Es lo mas elemental posible, eon tan solo 
un elemento <button> dentro de un elemento <section> que vamos a usar para solicitar y mostrar la información 
retornada porel sistema de ubicación. 


function iniciar(){ 

var boton=document.getElementByld('obtener'); 
boton.addEventListener('click', obtener, false); 

} 

function obtener(){ 

navigator.geolocation.getCurrentPosition(mostrar); 

} 

function mostrar(posicion){ 

var ubicacion=document.getElementByld('ubicación'); 
var datos=''; 

datos+='Latitud: 'tposicion.coords.latitudet'<br>'; 
datos+='Longitud: 'tposicion.coords.longitudet'<br>'; 
datos+='Exactitud: 'tposicion.coords.accuracyt'mts.<br>'; 
ubicación.innerHTML=datos; 

} 

window.addEventListener('load', iniciar, false); 


Listado 9-2. Obteniendo información sobre la localización del usuario. 

Una implementación de la API Geolocation es sencilla: declaramos el metodo getCurrentPosition () ycreamos 
una función que mostrara los valores retornados por el mismo. El metodo getCurrentPosition () es un metodo del 
objęto geolocation. Este es un nuevo objęto que es parte del objęto navigator, un objęto Javascript que fue 
anteriormente implementado para retornar información acerca del navegador y el sistema. Por lo tanto, para acceder al 
metodo getCurrentPosition () la sintaxis a usar es navigator. geolocation. getCurrentPosition (función), 
donde función es una función personalizada que recibira el objęto Position yprocesara la información que contiene. 

En el código del Listado 9-2, llamamos a esta función mostrar (). Cuando el metodo getCurrentPosition () es 
llamado, un nuevo objęto Position es creado eon la información de la ubicación actual del usuario y es enviado a la 
función mostrar (). Referenciamos este objęto dentro de la función eon la variable posicion, y luego usamos esta 
variable para mostrar los datos. 

El objęto Position tiene dos importantes atributos: coords y timestamp. En nuestro ejemplo solo usamos coords 
para acceder a la información que queremos mostrar (latitud, longitud y exactitud). Estos valores son grabados en la 
variable datos y luego mostrados en la pantalla como el nuevo contenido del elemento ubicación. 

Hagalo usted mismo: Cree archivos eon los códigos de los Listados 9-1 y9-2, suba los archivos a su servidory 
luego abra el documento HTML en su navegador. Cuando haga clic en el botón, el navegador le preguntara si 
desea activar o no el sistema de ubicación geografica. Si le permite a la aplicación acceder a esta información, 
entonces su ubicación, incluyendo longitud, latitud yexactitud, sera mostrada en pantalla. 


getCurrentPosition(ubicación, error) 


<j,Pero que ocurre si usted no permite al navegador acceder a información acerca de su ubicación? Agregando un 
segundo atributo al metodo getCurrentPosition (), eon otrą función, podremos capturar los errores producidos en el 
proceso. Uno de esos errores, por supuesto, ocurre cuando el usuario no acepta compartir sus datos. 

Junto eon el objęto Position, el metodo getCurrentPosition () retorna el objęto PositionError si un error es 
detectado. Este objęto es enviado al segundo atributo de getCurrentPosition (), ytiene dos atributos internos, error 
y message, para proveer el valor y la descripción del error. Los tres posibles errores son representados por las 
siguientes constantes: 

PERMISSION_DENIED (permiso denegado) -valor 1. Este error ocurre cuando el usuario no acepta activar el 
sistema de ubicación para compartir su información. 

POSITION_UNAVAILABLE (ubicación no disponible) - valor 2. Este error ocurre cuando la ubicación del dispositivo 
no pudo determinarse por ninguno de los sistemas de ubicación disponibles. 

TIMEOUT (tiempo excedido) - valor 3. Este error ocurre cuando la ubicación no pudo ser determinada en el periodo 



de tiempo maximo declarado en la configuración. 


function iniciar(){ 

var boton=document.getElementByld('obtener'); 
boton.addEventListener('click', obtener, false); 

} 

function obtener (){ 

navigator.geolocation.getCurrentPosition(mostrar, errores); 

} 

function mostrar(posicion){ 

var ubicacion=document.getElementByld('ubicacion'); 
var datos=''; 

datos+='Latitud: '+posicion.coords.latitude+'<br>'; 
datos+='Longitud: '+posicion.coords.longitudel'<br>'; 
datos+='Exactitud: '+posicion.coords.accuracyl'mts.<br>'; 
ubicacion.innerHTML=datos; 

} 

function errores(error){ 

alert('Error: 'terror.codeł' 'terror.message); 

} 

window.addEventListener('load', iniciar, false); 


Listado 9-3. Mostrando mensajes de error. 

Los mensajes de error son ofrecidos para uso interno. El propósito es ofrecer un mecanismo para que la aplicación 
reconozca la situación y proceda de acuerdo al error recibido. En el código del Listado 9-3, agregamos un segundo 
atributo al metodo getCurrentPosition () (otrą función) y creamos la función errores () para mostrar la información 
de los atributos codę ymessage. El valor de codę sera un numero entre 0 y 3 de acuerdo al numero de error (listado 
anteriormente). 

El objęto PositionError es enviado a la función errores () y representado en esta función por la variable error. 
Para propósitos didacticos, usamos un metodo alert() que muestra los datos recibidos, pero usted deberfa procesar 
esta información en silencio, si es posible, sin alertar al usuario de nada. Podemos tambien controlar por errores de 
forma i n d i vi d u a I (error. permission_denied, por ejemplo) yactuar solo si ese error en particular ocurrió. 


getCurrentPosition(ubicación, error, configuración) 


El tercer atributo que podemos usar en el metodo getCurrentPosition () es un objęto conteniendo hasta tres 
posibles propiedades: 

enableHighAccuracy Esta es una propiedad booleana para informar al sistema que requerimos de la información 
mas exacta que nos pueda ofrecer. El navegador intentara obtener esta información a traves de sistemas 
como GPS, por ejemplo, para retornar la ubicacion exacta del dispositivo. Estos son sistemas que consumen 
muchos recursos, por lo que su uso deberia estar limitado a circunstancias muy especificas. Para evitar 
consumos innecesarios, el valor por defecto de esta propiedad es false (falso). 

timeout Esta propiedad indica el tiempo maximo de espera para que la operación finalice. Si la información de la 
ubicacion no es obtenida antes del tiempo indicado, el error timeout es retornado. Su valor es en 
milisegundos. 

maximumAge Las ubicaciones encontradas previamente son almacenadas en un cache en el sistema. Si 
consideramos apropiado recurrir a la información grabada en lugar de intentar obtenerla desde el sistema 
(para evitar consumo de recursos o para una respuesta rapida), esta propiedad puede ser declarada eon un 
tiempo limite especlfico. Si la ultima ubicacion almacenada es mas vieja que el valor de este atributo entonces 
una nueva ubicacion es solicitada al sistema. Su valores en milisegundos. 


function iniciar(){ 

var boton=document.getElementByld('obtener'); 
boton.addEventListener('click', obtener, false); 

} 

function obtener(){ 
var geoconfig={ 

enableHighAccuracy: true, 




timeout: 10000, 
maximumAge: 60000 


} ; 

navigator.geolocation.getCurrentPosition(mostrar, errores, 

geoconfig); 

} 

function mostrar(posicion){ 

var ubicacion=document.getElementByld('ubicacion'); 
var datos=''; 

datos+='Latitud: '+posicion.coords.latitude+'<br>'; 
datos+='Longitud: '+posicion.coords.longitude+'<br>'; 
datos+='Exactitud: '+posicion.coords.accuracy+'mts.<br>'; 
ubicacion.innerHTML=datos; 


} 


function errores (error) { 

alert ('Error: 'terror.code+' 'terror.message); 

} 

window.addEventListener('load', iniciar, false); 


Listado 9-4. Configuración del sistema. 

El código del Listado 9-4 intentara obtener la ubicacion mas exacta posible del dispositivo en no mas de 10 
segundos, pero solo si no hay una ubicacion previa en el cache capturada menos de 60 segundos atras (si existe una 
ubicacion previa eon menos de 60 segundos de antiguedad, este sera el objęto Position retornado). 

El objęto conteniendo los valores de configuración fue creado primero y luego referenciado desde el metodo 
getCurrentPosition (). Nada cambió en el resto del código. La función mostrar () mostrara la información en la 
pantalla independiente-mente de su origen (si proviene del cache o es nueva). 

Conceptos basicos: Javascript provee diferentes formas de construir un objęto. Por propósitos de claridad, 
elegimos crearel objęto primero, almacenarlo en la variable geoconfig y luego usaresta referenda en el metodo 
getCurrentPosition (). Sin embargo, podriamos haber insertado el objęto directamente en el metodo como un 
atributo. En aplicaciones pequenas, objetos normalmente pueden ser evitados, pero no es el caso de códigos 
mas complejos. Para aprender mas sobre objetos y programación orientada a objetos en Javascript, visite 
nuestro sitio web ysiga los enlaces correspondientes a este capitulo. 

Con el ultimo código, podemos apreciar el propósito real de la API Geolocation y cual fue la intención de sus 
desarrolladores. Las funciones mas efectivas y practicas estan orientadas hacia dispositivos móviles. El valortrue 
(verdadero) para la propiedad enableHighAccuracy, por ejemplo, le solicitara al navegador usar sistemas como GPS 
para obtener la ubicacion mas exacta posible (un sistema casi exclusivo de dispositivos móviles), y los metodos 
watchPosition() y clearWatch (), que veremos a continuación, trabajan sobre ubicaciones actualizadas 
constantemente, algo solo posible, porsupuesto, cuando el dispositivo que esta accediendo la aplicación es móvil (yse 
esta moviendo). Esto trae a la luzdos asuntos importantes. Primero, la mayoria de nuestros códigos tendran que ser 
probados en un dispositivo móvil para saber exactamente como trabajan en una situación real. Ysegundo, deberemos 
ser responsables con el uso de esta API. GPS y otros sistemas de localización consumen muchos recursos y en la 
mayoria de los casos pueden acabar pronto con la bateria del dispositivo si no somos cautelosos. 

Con respecto al primer punto, disponemos de una alternativa. Simplemente visite el enlace dev.w3.org/geo/api/test- 
suite /y lea acerca de como experimentar y probar Geolocation API. Con respecto al segundo punto, solo un consejo: 
configure la propiedad enableHighAccuracy como true solo cuando es estrictamente necesario, y no abuse de esta 
posibilidad. 


watchPosition(ubicación, error, configuración) 


Similar a getCurrentPosition (), el metodo watchPosition () recibe tres atributos yrealiza la misma tarea: obtener 
la ubicacion del dispositivo que esta accediendo a la aplicación. La unica diferencia es que el primero realiza una unica 
operación, mientras que watchPosition () ofrece nuevos datos cada vez que la ubicacion cambia. Este metodo 
vigiIara todo el tiempo la ubicacion y enviara información a la función correspondiente cuando se detecte una nueva 
ubicacion, a menos que cancelemos el proceso con el metodo clearWatch (). 

Este es un ejemplo de como implementar el metodo watchPosition () basado en códigos previos: 


function iniciar (){ 

var boton=document.getElementByld('obtener'); 




boton.addEventListener('click', obtener, false); 

} 

function obtener (){ 
var geoconfig={ 

enableHighAccuracy: true, 
maximumAge: 60000 

} ; 

control=navigator.geolocation.watchPosition(mostrar, errores, 

geoconfię 

} 

function mostrar(posicion){ 

var ubicacion=document.getElementByld('ubicacion'); 
var datos=''; 

datos+='Latitud: '+posicion.coords.latitude+'<br>'; 
datos+='Longitud: '+posicion.coords.longitude+'<br>'; 
datos+='Exactitud: '+posicion.coords.accuracy+'mts.<br>'; 
ubicacion.innerHTML=datos; 

} 

function errores(error){ 

alert ('Error: 'terror.code+' 'terror.message); 

} 

window.addEventListener('load', iniciar, false); 


Listado 9-5. Probando el metodo watchPosition () . 

No notara ningun cambio en un ordenador de escritorio usando este código, pero en un dispositivo móvil nueva 
información sera mostrada cada vezque haya una modificación en la ubicacion del dispositivo. El atributo maximumAge 
determina que tan seguido la información sera enviada a la función mostrar (). Si la nueva ubicacion es obtenida 60 
segundos (60000 milisegundos) luego de la anterior, entonces sera mostrada, en caso contrario la función mostrar () 
no sera llamada. 

Notę que el valor retornado por el metodo watchPosition () fue almacenado en la variable control. Esta variable 
es como un identificador de la operación. Si mas adelante queremos cancelar el proceso de vigilancia, solo debemos 
ejecutarla linea clearWatch (control) y watchPosition () dejara de actualizarla información. 

Si ejecuta este código en un ordenador de escritorio, el metodo watchPosition () funcionara como el anterior 
estudiado getCurrentPosition (); la información no sera actualizada. La función mostrar () es solo llamada cuando 
la ubicacion cambia. 


Usos practicos eon Google Maps 


Hasta el momento hemos mostrado la información sobre la ubicacion exactamente como la recibimos. Sin embargo, 
estos valores normalmente no significan nada para la gente comun. La mayoria de nosotros no podemos 
inmediatamente decircual es nuestra actual ubicacion en valores de latitud ylongitud, ymucho menos identificara partir 
de estos valores una ubicacion en el mundo. Disponemos de dos alternativas: usaresta información internamente para 
calcular posiciones, distancias y otros valores que nos permitiran ofrecer resultados especificos a nuestros usuarios 
(como productos o servicios en el area), o podemos ofrecer la información obtenida por medio de la API Geolocation en 
un medio mucho mas comprensible. iY que mas comprensible que un mapa para representar una ubicacion 
geografica? 

Mas atras en este libro hablamos acerca de la API Google Maps. Esta es una API Javascript externa, provista por 
Google, que nada tiene que ver eon HTML5 pero es incluida extraoficialmente dentro de la especificación y es 
ampliamente utilizada en sitios webs modernos estos dfas. Ofrece una variedad de alternativas para trabajar eon 
mapas interactivos e incluso vistas reales de lugares muy especificos a traves de la tecnologia StreetView. 

Vamos a mostrar un ejemplo simple de utilización aprovechando una parte de la API llamada Static Maps API. Con 
esta API especifica, solo necesitamos construiruna URL con la información de la ubicacion para obtener en respuesta 
la imagen de un mapa con el area seleccionada. 


function iniciar(){ 

var boton=document.getElementByld('obtener'); 
boton.addEventListener('click', obtener, false); 

} 

function obtener(){ 



navigator.geolocation.getCurrentPosition(mostrar, errores); 

} 

function mostrar(posicion){ 

var ubicacion=document.getElementByld('ubicacion'); 
var mapurl='http://maps.google.com/maps/api/staticmap?center='+ 
posicion.coords.latitude+','+posicion.coords.longitude+'&zoom= 
12&size=400x400&sensor=false&markers='+posicion.coords.latitudet 

'tposicion.coords.longitude; 
ubicacion.innerHTML='<img src="'+mapurl+'">'; 

} 

function errores(error){ 

alert ('Error: 'terror.code+' 'terror.message); 

} 

window.addEventListener('load', iniciar, false); 


Listado 9-6. Representando la ubicacion en un mapa. 

El código es simple. Usamos el metodo getCurrentPosition () y enviamos la información a la función 
mostrar () como siempre, pero ahora en esta función los valores del objęto Position son agregados a una URL de 
Google y luego la dirección obtenida es insertada como la fuente de un elemento <img> para mostrar el mapa en 
pantalla. 

Hagalo usted mismo: Pruebe el código del Listado 9-6 en su navegador usando la plantilla del Listado 9-1. 
Cambie los valores de los atributos zoom y size en la URL para modificar el mapa retornado por la API. Visite la 
pagina de Google Maps API para estudiar las diferentes alternativas provistas por esta API: code.google.com/ 
apis/maps/. 



9.2 Referenda rapida 


Determinar la ubicación fisica del usuario se ha vuelto critico en aplicaciones web modernas. El reciente exito de los 
dispositivos móviles ofrece nuevas posibilidades para crear aplicaciones que aprovechan esta información. 


Metodos 


La API Geolocation provee tres metodos para obtener la ubicación de un dispositivo: 

getCurrentPositionfubicación, error, configuración) Este metodo retorna información sobre la ubicación del 
dispositivo que esta accediendo a la aplicación. El primer atributo es una función destinada a procesar la 
información, el segundo atributo es otrą función para procesamiento de errores, yel tercer atributo es un objęto 
eon valores de configuración (vea Objęto Configuración debajo). 

watchPositionfubicación, error, configuración) Este metodo retorna información sobre la ubicación del 
dispositivo que esta accediendo a la aplicación cada vezque la ubicación cambia. El primer atributo es una 
función destinada a procesar la información, el segundo atributo es otrą función para procesamiento de 
errores, yel tercer atributo es un objęto eon valores de configuración (vea Objęto Configuración debajo). 

clearWatch(id) Este metodo cancela el proceso que ha sido empezado por el metodo watchPosition (). El 
atributo id es el valor de identificación retornado por el metodo watchPosition () cuando es llamado. 


Objetos 


Los metodos getCurrentPosition() y watchPosition () generan dos objetos para comunicar la información 
retornada porel sistema de ubicación yel estado de la operación. 

Objęto Position Este objęto es generado para contener la información acerca de la ubicación detectada. Tiene 
dos atributos: coords y timestamp. 

coords Este es un atributo del objęto Position. Tiene siete atributos internos para retornar la información de la 
ubicación: latitude (latitud), longitude (longitud), altitude (altitud en metros), accuracy (exactitud en 
metros), altitudeAccuracy (exactitud de la altitud en metros), heading (dirección en grados) y speed (velocidad 
en metros por segundo). 

timestamp Este es un atributo del objęto Position. Retorna el momento en el que la ubicación fue detectada. 

Objęto PositionError Este objęto es generado cuando un error ocurre. Ofrece dos atributos generales eon ei valor 
yel mensaje del error, ytres valores especificos para identificación de errores individuales (listados debajo). 

message Este es un atributo del objęto PositionError. Retorna un mensaje describiendo el error detectado. 

error Este es un atributo del objęto PositionError. Contiene el valor del error detectado. Los posibles valores 
son listados debajo: 

PERMISSION_DENIED (permiso denegado) - valor 1 en el atributo error. Esta constante es true (verdadero) 
cuando el usuario no permite a la aplicación accedera la información sobre su ubicación. 

POSITION_UNAVAILABLE (ubicación no disponible) -valor 2 en el atributo error. Esta constante es true 
(verdadero) cuando la ubicación del dispositivo no puede ser determinada. 

TIMEOUT (tiempo excedido) - valor 3 en el atributo error. Esta constante es true (verdadero) cuando la ubicación 
no puede ser determinada antes del periodo de tiempo declarado en la configuración. 

El siguiente objęto es requerido por los metodos getCurrentPosition () y watchPosition () para propósitos de 
configuración. 

Objęto Configuración Este objęto provee valores de configuración correspondientes para los metodos 
getCurrentPosition () y watchPosition(). 

enableHighAccuracy Esta es una de las posibles propiedades del Objęto Configuración. Si es declarada como 
true (verdadero), le solicitara al navegador obtener la ubicación mas precisa posible. 

timeout Esta es una de las propiedades del Objęto Configuración. Indica el maximo tiempo disponible que tiene 
la operación para realizarse. 

maximumAge Esta es una de las propiedades del Objęto Configuración. Indica por cuanto tiempo la ultima 



ubicación detectada sera valida. 




Capitulo 10 
API Web Storage 


10.1 Dos sistemas de almacenamiento 


La Web fue primero pensada como una forma de mostrar información, solo mostrarla. El procesamiento de información 
comenzó luego, primero eon aplicaciones del lado del servidorymas tarde, de forma bastante ineficiente, a traves de 
pequeńos códigos y complementos (plug-ins) ejecutados en el ordenador del usuario. Sin embargo, la esencia de la 
Web siguió siendo basicamente la misma: la información era preparada en el servidory luego mostrada a los usuarios. 
El trabajo duro se desarrollaba casi completamente del lado del servidor porque el sistema no aprovechaba los 
recursos en los ordenadores de los usuarios. 

HTML5 equilibra esta situación. Justificada por las particulares caracteristicas de los dispositivos móviles, el 
surgimiento de los sistemas de computación en la nube, y la necesidad de estandarizar tecnologfas e innovaciones 
introducidas por plug-ins a traves de los ultimos ańos, la especificación de HTML5 incluye herramientas que hacen 
posible construir y ejecutar aplicaciones completamente funcionales en el ordenador del usuario, incluso cuando no 
existe conexión a la red disponible. 

Una de las caracteristicas mas necesitadas en cualquier aplicación es la posibilidad de almacenar datos para 
disponer de ellos cuando sean necesarios, pero no existfa aun un mecanismo efectivo para este fin. Las llamadas 
“Cookies” (archivos de texto almacenados en el ordenador del usuario) fueron usadas por anos para preservar 
información, pero debido a su naturaleza se encontraron siempre limitadas a pequeńas cadenas de texto, lo que las 
hacia utiles solo en determinadas circunstancias. 

La API Web Storage es basicamente una mejora de las Cookies. Esta API nos permite almacenar datos en el disco 
duro del usuario y utilizarlos luego del mismo modo que lo haria una aplicación de escritorio. El proceso de 
almacenamiento provisto por esta API puede ser utilizado en dos situaciones particulares: cuando la información tiene 
que estar disponible solo durante la sesión en uso, y cuando tiene que ser preservada todo el tiempo que el usuario 
desee. Para hacer estos metodos mas claros y comprensibles para los desarrolladores, la API fue dividida en dos 
partes llamadas sessionStorage y localStorage. 

sessionStorage Este es un mecanismo de almacenamiento que conservara los datos disponible solo durante la 
duración de la sesión de una pagina. De hecho, a diferencia de sesiones reales, la información almacenada a 
traves de este mecanismo es solo accesible desde una unica ventana o pestana yes preservada hasta que la 
ventana es cerrada. La especificación aun nombra “sesiones” debido a que la información es preservada 
incluso cuando la ventana es actualizada o una nueva pagina desde el mismo sitio web es cargada. 

localStorage Este mecanismo trabaja de forma similar a un sistema de almacenamiento para aplicaciones de 
escritorio. Los datos son grabados de forma permanente y se eneuentran siempre disponibles para la 
aplicación que los creó. 

Ambos mecanismos trabajan a traves de la misma interface, compartiendo los mismos metodos y propiedades. Y 
ambos son dependientes del origen, lo que quiere decir que la información esta disponible solo a traves del sitio web o 
la aplicación que los creó. Cada sitio web tendra designado su propio espacio de almacenamiento que durara hasta 
que la ventana es cerrada o sera permanente, de aeuerdo al mecanismo utilizado. 

La API claramente diferencia datos temporarios de permanentes, facilitando la construcción de pequenas 
aplicaciones que necesitan preservar solo unas cadenas de texto como referenda temporaria (por ejemplo, carros de 
compra) o aplicaciones mas grandes y complejas que necesitan almacenar documentos completos por todo el tiempo 
que sea necesario. 

IMPORTANTE: Muchos navegadores solo trabajan de forma adecuada eon esta API cuando la fuente es un 

servidor real. Para probar los siguientes códigos, le recomendamos que primero suba los archivos a su servidor. 



10.2 La sessionStorage 


Esta parte de la API, sessionStorage, es como un reemplazo para las Cookies de sesión. Las Cookies, asi como 
sessionStorage, mantienen los datos disponibles durante un periodo especlfico de tiempo, pero mientras las 
Cookies de sesión usan el navegador como referenda, sessionStorage usa solo una simple ventana o pestańa. Esto 
significa que las Cookies creadas para una sesión estaran disponibles mientras el navegador continue abierto, 
mientras que los datos creados eon sessionStorage estaran solo disponibles mientras la ventana que los creó no es 
cerrada. 


Implementación de un sistema de almacenamiento de datos 


Debido a que ambos sistemas, sessionStorage y locaistorage, trabajan eon la misma interface, vamos a necesitar 
solo un documento HTML y un simple formulario para probar los códigos y experimentar eon esta API: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Web Storage API</title> 

<link rel="stylesheet" href="storage.css"> 

<script src="storage.js"X/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Clave:<br><input type="text" name="clave" id="clave"x/p> 
<p>Valor:<br><textarea name="text" id="texto"x/textarea></p> 
<pxinput type="button" name="grabar" id="grabar" 

value="Grabar"x/p> 

</form> 

</section> 

<section id="cajadatos"> 

No hay información disponible 
</section> 

</body> 

</html> 


Listado 10-1. Plantilla para la API Storage 

Tambien crearemos un grupo de reglas de estilo simples para dar forma a la pagina y diferenciar el area del 
formulario de la caja donde los datos seran mostrados ylistados: 


#caj aformulario{ 
float: left; 
padding: 20px; 
border: lpx solid #999999; 

} 

#caj adatos{ 
float: left; 
width: 400px; 
margin-left: 20px; 
padding: 20px; 
border: lpx solid #999999; 

} 

#clave, #texto{ 
width: 200px; 

} 

#cajadatos > div{ 
padding: 5px; 

border-bottom: lpx solid #999999; 



Listado 10-2. Estilos para nuestra plantilla. 

Hagalo usted mismo: Cree un archivo HTML eon el código del Listado 10-1 y un archivo CSS llamado 
storage.css eon los estilos del Listado 10-2. Tambien necesitara crear un archivo llamado storage. js para 
grabaryprobarlos códigos Javascript presentados a continuación. 


Creando datos 


Ambos, sessionStorage y localstorage, almacenan datos como Items. Los Items estan formados por un par 
clave/valor, y cada valor sera convertido en una cadena de texto antes de ser almacenado. Piense en Items como si 
fueran variables, eon un nombre yun valor, que pueden serereadas, modificadas o eliminadas. 

Existen dos nuevos metodos especlficos de esta API incluidos para crear y leer un valor en el espacio de 
almacenamiento: 

setltem(clave, valor) Este es el metodo que tenemos que llamar para crear un Item. El Item sera creado eon una 
clave y un valor de aeuerdo a los atributos especificados. Si ya existe un Item eon la misma clave, sera 
actualizado al nuevo valor, por lo que este metodo puede utilizarse tambien para modificar datos previos. 

getltem(clave) Para obtener el valor de un Item, debemos llamar a este metodo especificando la clave del Item 
que queremos leer. La clave en este caso es la misma que declaramos cuando creamos al Item eon 
setltem(). 


function iniciar(){ 

var boton=document.getElementByld('grabar'); 
boton.addEventListener('click', nuevoitem, false); 

} 

function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 
var valor=document.getElementByld('texto').value; 

sessionStorage.setltem(clave,valor); 

mostrar (clave); 

} 

function mostrar(clave){ 

var caj adatos=document.getElementByld('caj adatos'); 

var valor=sessionStorage.getltem(clave); 

cajadatos.innerHTML='<div>'+clave+' - '+valor+'</div>'; 

} 

window.addEventListener('load', iniciar, false); 


Listado 10-3. Almacenando y leyendo datos. 

El proceso es extremadamente simple. Los metodos son parte de sessionStorage y son llamados eon la sintaxis 
sessionStorage. setitem() . En el código del Listado 10-3, la función nuevoitem() es ejecutada cada vez que el 
usuario hace clic en el botón del formulario. Esta función crea un Item eon la información insertada en los campos del 
formulario yluego Marna a la función mostrar (). Esta ultima función lee el Item de aeuerdo a la clave recibida usando el 
metodo getitem() ymuestra su valoren la pantalla. 

Ademas de estos metodos, la API tambien ofrece una sintaxis abreviada para crearyleer Items desde el espacio de 
almacenamiento. Podemos usar la clave del Item como una propiedad yacceder a su valor de esta manera. 

Este metodo usa en realidad dos tipos de sintaxis diferentes de aeuerdo al tipo de información que estamos usando 
para crear el Item. Podemos encerrar una variable representando la clave entre corchetes (por ejemplo, 
sessionStorage[clave] =valor) o podemos usar directamente el nombre de la propiedad (por ejemplo, 
sessionStorage.miitem=valor). 


function iniciar (){ 

var boton=document.getElementByld('grabar'); 
boton.addEventListener('click', nuevoitem, false); 

} 

function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 



var valor=document.getElementByld('texto').value; 

sessionStorage[clave]=valor; 

mostrar(clave); 

} 

function mostrar(clave){ 

var caj adatos=document.getElementByld('caj adatos'); 

var valor=sessionStorage[clave]; 

cajadatos.innerHTML='<div>'+clave+' - '+valor+'</div>'; 

} 

window.addEventListener('load', iniciar, false); 


Listado 10-4. Usando un atajo para trabajar eon items. 


Leyendo datos 


El anterior ejemplo solo lee el ultimo ftem grabado. Vamos a mejorar este código aprovechando mas metodos y 
propiedades provistos por la API eon el propósito de manipular items: 

length Esta propiedad retorna el numero de items guardados por esta aplicación en el espacio de 
almacenamiento. Trabaja exactamente como la propiedad length usada normalmente en Javascript para 
procesar arrays, y es util para lecturas secuenciales. 

key(indice) Los ftems son almacenados secuencialmente, enumerados eon un Indice automatico que comienzo 
por 0. Con este metodo podemos leer un item especifico o crear un bucie para obtener toda la información 
almacenada. 


function iniciar (){ 

var boton=document.getElementByld('grabar'); 
boton.addEventListener('click', nuevoitem, false); 
mostrar(); 

} 

function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 
var valor=document.getElementByld('texto').value; 

sessionStorage.setltem(clave,valor); 
mostrar (); 

document.getElementByld('clave').value=' 
document.getElementByld('texto').value=''; 

} 

function mostrar(){ 

var caj adatos=document.getElementByld('caj adatos'); 
caj adatos.innerHTML=''; 

for(var f=0;f<sessionStorage.length;f++){ 
var clave=sessionStorage.key(f); 
var valor=sessionStorage.getltem(clave); 

cajadatos.innerHTML+='<div>'+clave+' - '+valor+'</div>'; 

} 

} 

window.addEventListener('load', iniciar, false); 


Listado 10-5. Lstando items. 

El propósito del código en el Listado 10-5 es mostrar un listado completo de los items en la caja derecha de la 
pantalla. La función mostrar () fue mejorada usando la propiedad length y el metodo key (). Creamos un bucie for 
que va desde 0 al numero de ftems que existen en el espacio de almacenamiento. Dentro del bucie, el metodo key () 
retornara la clave que nosotros definimos para cada item. Por ejemplo, si el item en la posición 0 del espacio de 
almacenamiento fue creado con la clave “miitem”, el código sessionStorage.key (0) retornara el valor “miitem”. 
Llamando a este metodo desde un bucie podemos listar todos los items en la pantalla con sus correspondientes 
claves yvalores. 

La función mostrar () es llamada desde la función iniciar () tan pronto como la aplicación es ejecutada. De este 





modo podremos ver desde el comienzo los Items que fueron grabados previamente en el espacio de almacenamiento. 

Hagalo usted mismo: Aproveche los conceptos estudiados eon la API Forms en el Capitulo 6 para controlar la 
validezde los campos del formulario y no permitir la inserción de items vacios o invalidos. 


Eliminando datos 


Los items pueden ser creados, lefdos y, por supuesto, eliminados. Es hora de ver como eliminar un item. La API ofrece 
dos metodos para este propósito: 

removeltem(clave) Este metodo eliminara un Item individual. La clave para identificar el Item es la misma 
declarada cuando el Item fue creado eon el metodo setitem(). 

clear() Este metodo vaciara el espacio de almacenamiento. Todos los Items seran eliminados. 


function iniciar(){ 

var boton=document.getElementByld('grabar'); 
boton.addEventListener('click', nuevoitem, false); 
mostrar(); 

} 

function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 
var valor=document.getElementByld('texto').value; 

sessionStorage.setltem(clave,valor); 
mostrar (); 

document.getElementByld('clave').value=''; 
document.getElementByld('texto').value=' 

} 

function mostrar(){ 

var caj adatos=document.getElementByld('caj adatos'); 
ca j adatos. innerHTML=' <divxbutton 

onclick="eliminarTodo()">Eliminar Todo</buttonx/div>'; 
for(var f=0;f<sessionStorage.length;f++){ 
var clave=sessionStorage.key(f); 
var valor=sessionStorage.getltem(clave); 

cajadatos.innerHTML+='<div>'+clave+' - '+valor+'<brxbutton 
onclick="eliminar(\''+clave+'\')">Eliminar</buttonx/div>'; 


function eliminar(clave){ 

if (confirm('Esta Seguro?')){ 

sessionStorage.removeItem(clave); 

mostrar (); 


function eliminarTodo(){ 

if(confirm('Esta Seguro?'))! 

sessionStorage.elear(); 

mostrar(); 


window.addEventListener('load', iniciar, false); 


Listado 10-6. Eliminando items. 

Las funciones iniciar() y nuevoitem () en el Listado 10-6 son las mismas de códigos previos. Solo la función 
mostrar () cambia para incorporarel manejador de eventos onclick y llamar a las funciones que eliminaran un Item 
individual o vaciaran el espacio de almacenamiento. La lista de Items presentada en pantalla es construida de la 
misma manera que antes, pero esta vez un botón “Eliminar” es agregado junto a cada Item para poder eliminarlo. Un 
botón para eliminartodos los Items juntos tambien fue agregado en la parte superior. 

Las funciones eliminar () y eliminarTodo () se encargan de eliminar el Item seleccionado o limpiarel espacio 
de almacenamiento, respectivamente. Cada función Marna a la función mostrar () al finał para actualizar la lista de 
Items en pantalla. 







Hagalo usted mismo: Con el código del Listado 10-6, podrą estudiar como la información es procesada por 
sessionStorage. Abra la plantilla del Listado 10-1 en su navegador, cree nuevos items y luego abra la plantilla 
en una nueva ventana. La información en cada ventana es diferente. La vieja ventana mantendra su información 
disponible y el espacio de almacenamiento de la nueva ventana estara vacio. Adiferencia de otros sistemas 
(como Cookies de sesiones), para sessionStorage cada ventana es considerada una instancia diferente de la 
aplicación yla información de la sesión no se propaga entre ellas. 

El sistema sessionStorage preserva los datos creados en una ventana solo hasta que esa ventana es cerrada. Es 
util para controlar carros de compra o cualquier otrą aplicación que requiere acceso a datos por periodos cortos de 
tiempo. 



10.3 La localStorage 


Disponer de un sistema confiable para almacenar datos durante la sesión de una ventana puede ser extremadamente 
util en algunas circunstancias, pero cuando intentamos simular poderosas aplicaciones de escritorio en la web, un 
sistema de almacenamiento temporario no es suficiente. 

Para cubrir este aspecto, Storage API ofrece un segundo sistema que reservara un espacio de almacenamiento 
para cada aplicación (cada origen) y mantendra la información disponible permanentemente. Con localStorage, 
finalmente podemos grabar largas cantidades de datos y dejar que el usuario decida si la información es util y debe ser 
conservada o no. 

El sistema usa la misma interface que sessionStorage, debido a esto cada metodo y propiedad estudiado hasta 
el momento en este capitulo son tambien disponibles para localStorage. Solo la substitución del prefijo session por 
local es requerida para preparar los códigos. 


function iniciar(){ 

var boton=document.getElementByld('grabar'); 
boton.addEventListener('click', nuevoitem, false); 
mostrar(); 


function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 
var valor=document.getElementByld('texto').value; 

localStorage.setltem(clave,valor); 

mostrar(); 

document.getElementByld('clave').value=' 
document.getElementByld('texto').value=' 

} 

function mostrar(){ 

var caj adatos=document.getElementByld('caj adatos'); 
caj adatos.innerHTML=''; 
for(var f=0;f<localStorage.length;f++){ 
var clave=localStorage.key(f); 
var valor=localStorage.getltem(clave); 

cajadatos.innerHTML+='<div>'+clave+' - '+valor+'</div>'; 


window.addEventListener('load', iniciar, false); 


Listado 10-7. Usando localStorage. 

En el Listado 10-7, simplemente reemplazamos sessionStorage por localStorage en el código de uno de los 
ejemplos anteriores. Ahora, cada item creado sera preservado a traves de diferentes ventanas e incluso luego de que 
todas las ventanas del navegadorson cerradas. 

Hagalo usted mismo: Usando la plantilla del Listado 10-1, pruebe el código del Listado 10-7. Este código creara 
un nuevo item con la información insertada en el formulario y automaticamente listara todos los Items disponibles 
en el espacio de almacenamiento reservado para esta aplicación. Cierre el navegador y abra el archivo HTML 
nuevamente. La información es preservada, por lo que podrą ver aun en pantalla todos los items ingresados 
previamente. 


Evento storage 


Debido a que localStorage hace que la información este disponible en cada ventana donde la aplicación fue cargada, 
surgen al menos dos problemas: debemos resolver como estas ventanas se comunicaran entre si y como haremos 
para mantener la información actualizada en cada una de ellas. En respuesta a ambos problemas, la especificación 
incluye el evento storage. 

storage Este evento sera disparado por la ventana cada vez que un cambio ocurra en el espacio de 
almacenamiento. Puede ser usado para informar a cada ventana abierta con la misma aplicación que los 
datos han cambiado en el espacio de almacenamiento yque se debe haceralgo al respecto. 






function iniciar(){ 

var boton=document.getElementByld('grabar'); 
boton.addEventListener('click', nuevoitem, false); 

window.addEventListener("storage", mostrar, false); 

mostrar (); 

} 

function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 
var valor=document.getElementByld('texto').value; 

localStorage.setltem(clave,valor); 
mostrar (); 

document.getElementByld('clave').value=' 
document.getElementByld('texto').value=' 

} 

function mostrar(){ 

var caj adatos=document.getElementByld('caj adatos'); 
caj adatos.innerHTML=''; 

for(var f=0;fclocalStorage.length;f++){ 
var clave=localStorage.key(f); 
var valor=localStorage.getltem(clave); 

cajadatos.innerHTML+='<div>'+clave+' - '+valor+'</div>'; 


window.addEventListener('load', iniciar, false); 


Listado 10-8. Escuchando al evento storze para mantener la lista de items actualizada. 

Solo necesitamos comenzar a escuchar al evento storage en la función iniciar () del código 10-8 para ejecutar la 
función mostrar () en cada ventana siempre que un item es creado, modificado o eliminado. Ahora, si algo cambia en 
una ventana, el cambio sera mostrado autom aticamente en el resto de las ventanas que estan ejecutando la misma 
aplicación. 


Espacio de almacenamiento 


La información almacenada por localStorage sera permanente a menos que el usuario decida que ya no la necesita. 
Esto significa que el espacio fisico en el disco duro ocupado por esta información probablemente crecera cada vez que 
la aplicación sea usada. Hasta este momento, la especificación de HTML5 recomienda a los fabricantes de 
navegadores que reserven un rmnimo de 5 megabytes para cada origen (cada sitio web o aplicación). 

Esta es solo una recomendación que probablemente cambiara dramaticamente en los próximos ańos. Algunos 
navegadores estan consultando al usuario si expandiro no el espacio disponible cuando la aplicación lo necesita, pero 
usted deberia ser consciente de esta limitación ytenerla en cuenta a la hora de desarrollar sus aplicaciones. 

IMPORTANTE: Muchos navegadores solo trabajan de forma adecuada eon esta API cuando la fuente es un 
servidor real. Para probar los siguientes códigos, le recomendamos que primero suba los archivos a su servidor. 





10.4 Referenda rapida 


Con la ayuda de la API Web Storage, ahora las aplicaciones web pueden ofrecer un espacio de almacenamiento. 
Usando un par clave/valor, la información es almacenada en el ordenador del usuario para un rapido acceso o para 
trabajar desconectado de la red. 


Tipo de almacenamiento 


Dos mecanismos diferentes son ofrecidos para almacenar datos: 

sessionStorage Este mecanismo mantiene la información almacenada solo disponible para una simple ventana 
ysolo hasta que la ventana es cerrada. 

localStorage Este mecanismo almacena datos de forma permanente. Estos datos son compartidos por todas las 
ventanas que estan ejecutando la misma aplicación yestaran disponibles a menos que el usuario decida que 
ya no los necesita. 


Metodos 


La API incluye una interface comun para cada mecanismo que cuenta con nuevos metodos, propiedades yeventos: 

setltem(clave, valor) Este metodo crea un nuevo item que es almacenado en el espacio de almacenamiento 
reservado para la aplicación. El Item esta compuesto por un par clave/valor creado a partir de los atributos 
clave y valor. 

getltem(clave) Este metodo lee el contenido de un Item identificado por la clave especificada por el atributo 
clave. El valor de esta clave debe ser el mismo usado cuando el Item fue creado con el metodo setitem(). 

key(indice) Este metodo retorna la clave del Item encontrado en la posición especificada por el atributo indice 
dentro del espacio de almacenamiento. 

removeltem(clave) Este metodo elimina un Item con la clave especificada por el atributo clave. El valor de esta 
clave debe ser el mismo usado cuando el Item fue creado por el metodo setitem(). 

clear() - Este metodo elimina todos los items en el espacio de almacenamiento reservado para la aplicación. 

Propiedades 

length Esta propiedad retorna el numero de items disponibles en el espacio de almacenamiento reservado para 
la aplicación. 

Eventos 

storage Este evento es disparado cada vez que un cambio se produce en el espacio de almacenamiento 

reservado para la aplicación. 




Capitulo 11 
API lndexedDB 


11.1 UnaAPIde bajo nivel 

La API estudiada en el capitulo anterior es util para almacenamiento de pequeńas cantldades de datos, pero 
cuando se trata de grandes cantidades de datos estructurados debemos recurrira un sistema de base de datos. 
La API lndexedDB es la solución provista por HTML5 a este respecto. 

lndexedDB es un sistema de base de datos destinado a almacenar información indexada en el ordenador del 
usuario. Fue desarrollada como una API de bajo nivel eon la intención de permitir un amplio espectro de usos. 
Esto la convierte en una de las API mas poderosa de todas, pero tambien una de las mas complejas. El objetivo 
fue proveer la estructura mas basica posible para permitir a los desarrolladores construir librerfas y crear 
interfaces de alto nivel para satisfacer necesidades especfficas. En una API de bajo nivel como esta tenemos que 
hacernos cargo de cada aspecto y controlar las condiciones de cada proceso en toda operación realizada. El 
resultado es una API a la que la mayorla de los desarrolladores tardara en acostumbrarse y probablemente 
utilizara de forma indirecta a traves de otras librerfas populares construidas sobre ella que seguramente surgiran 
en un futuro cercano. 

La estructura propuesta por lndexedDB es tambien diferente de SQL u otros sistemas de base de datos 
populares. La información es almacenada en la base de datos como objetos (registros) dentro de lo que es 
llamado Almacenes de Objetos (tablas). Los Almacenes de Objetos no tienen una estructura especffica, solo un 
nombre e fndices para poder encontrar los objetos en su interior. Estos objetos tampoco tienen una estructura 
definida, pueden ser diferentes unos de otros y tan complejos como necesitemos. La unica condición para los 
objetos es que contengan al menos una propiedad declarada como fndice para que sea posible encontrarlos en 
el Almacen de Objetos. 


Base de datos 


La base de datos misma es simple. Debido a que cada base de datos es asociada eon un ordenador y un sitio 
web o aplicación, no existen usuarios para agregar o restricciones de acceso que debamos considerar. Solo 
necesitamos especificar el nombre yla versión, yla base de datos estara lista. 

La interface declarada en la especificación para esta API provee el atributo indexedDB y el metodo open() 
para crear la base de datos. Este metodo retorna un objęto sobre el cual dos eventos seran disparados para 
indicarel exito o los errores surgidos durante el proceso de creación de la base de datos. 

El segundo aspecto que debemos considerar para crear o abrir una base de datos es la versión. La API 
requiere que una versión sea asignada a la base de datos. Esto es para preparar al sistema para futuras 
migraciones. Cuando tenemos que actualizar la estructura de una base de datos en el lado del servidor para 
agregar mas tablas o fndices, normalmente detenemos el servidor, migramos la información hacia la nueva 
estructura y luego encendemos el servidor nuevamente. Sin embargo, en este caso la información es contenida 
del lado del cliente y, por supuesto, el ordenador del usuario no puede ser apagado. Como resultado, la versión 
de la base de datos debe sercambiada yluego la información migrada desde la vieja a la nueva versión. 

Para trabajar eon versiones de bases de datos, la API ofrece la propiedad version y el metodo 
setVersion (). La propiedad retorna el valor de la versión actual yel metodo asigna un nuevo valor de versión a 
la base de datos en uso. Este valor puede ser numerico o cualguier cadena de texto que se nos ocurra. 


Objetos y Almacenes de Objetos 


Lo que solemos llamar registros, en lndexedDB son llamados objetos. Estos objetos incluyen propiedades para 
almacenar e identificar valores. La cantidad de propiedades ycómo los objetos son estructurados es irrelevante. 
Solo deben incluir al menos una propiedad declarada como fndice para poder encontrarlos dentro del Almacen de 
Objetos. 

Los Almacenes de Objetos (tablas) tampoco tienen una estructura especffica. Solo el nombre y uno o mas 
fndices deben ser declarados en el momento de su creación para poder encontrar objetos en su interior mas 
tarde. 
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Figura 11-1. Objetos eon diferentes propiedades almacenados en un Almacen de Objetos. 

Como podemos ver en la Figura 11-1, un Almacen de Objetos contiene diversos objetos eon diferentes 
propiedades. Algunos objetos tienen una propiedad dvd, otros tienen una propiedad Libro, etc... Cada uno tiene 
su propia estructura, pero todos deberan tener al menos una propiedad declarada como indice para poder ser 
encontrados. En el ejemplo de la Figura 11-1, este indice podrfa ser la propiedad id. 

Para trabajar eon objetos yAlmacenes de Objetos solo necesitamos crear el Almacen de Objetos, declarar las 
propiedades que seran usadas como indices y luego comenzar a almacenar objetos en este almacen. No 
necesitamos pensar acerca de la estructura o el contenido de los objetos en este momento, solo considerar los 
indices que vamos a utilizar para encontrarlos mas adelante en el almacen. 

La API provee varios metodos para manipular Almacenes de Objetos: 

createObjectStorefnombre, clave, autolncremento) Este metodo crea un nuevo Almacen de Objetos eon el 
nombre y la configuración declarada por sus atributos. El atributo nombre es obligatorio. El atributo 
clave declarara un fndice comun para todos los objetos. Y el atributo autolncremento es un valor 
booleano que determina si el Almacen de Objetos tendra un generadorde claves automatico. 

objectStore(nombre) Para acceder a los objetos en un Almacen de Objetos, una transacción debe ser 
iniciada y el Almacen de Objetos debe ser abierto para esa transacción. Este metodo abre el Almacen de 
Objetos eon el nombre declarado porel atributo nombre. 

deleteObjectStore(nombre) Este metodo destruye un Almacen de Objetos eon el nombre declarado por el 
atributo nombre. 

Los metodos createObjectStore () y deleteObjectStore (), asl como otros metodos responsables de la 
configuración de la base de datos, pueden solo seraplicados cuando la base de datos es creada o mejorada en 
una nueva versión. 


Indices 


Para encontrar objetos en un Almacen de Objetos necesitamos declarar algunas propiedades de estos objetos 
como fndices. Una forma facil de hacerlo es declarar el atributo clave en el metodo createObjectStore (). La 
propiedad declarada como clave sera un indice comun para cada objęto almacenado en ese Almacen de 
Objetos particular. Cuando declaramos el atributo clave, esta propiedad debe estar presente en todos los 
objetos. 

Ademas del atributo clave podemos declarar todos los indices que necesitemos para un Almacen de Objetos 
usando metodos especiales provistos para este propósito: 

createlndex(nombre, propiedad, unico) Este metodo crea un indice para un Almacen de Objetos especffico. 
El atributo nombre es un nombre eon el que identificar al fndice, el atributo propiedad es la propiedad 
que sera usada como fndice, yunique es un valor booleano que indica si existe la posibilidad de que 
dos o mas objetos compartan el mismo valor para este fndice. 

index(nombre) Para usar un fndice primero tenemos que crear una referenda al fndice y luego asignar esta 
referenda a la transacción. El metodo index () crea esta referenda para el fndice declarado en el 
atributo nombre. 







deletelndex(nombre) Si ya no necesitamos un indice podemos eliminarlo usando este metodo. 


Transacciones 


Un sistema de base de datos trabajando en un navegador debe contemplar algunas circunstancias unicas que 
no estan presentes en otras plataformas. El navegador puede fallar, puede ser cerrado abruptamente, el proceso 
puede ser detenido por el usuario, o simplemente otro sitio web puede ser cargado en la misma ventana, por 
ejemplo. Existen muchas situaciones en las que trabajar directamente eon la base de datos puede causar mai 
funcionamiento o incluso corrupción de datos. Para prevenir que algo asl suceda, cada acción es realizada por 
medio de transacciones. 

El metodo que genera una transacción se llama transaction () . Para declarar el tipo de transacción, 
contamos eon los siguientes tres atributos: 

READ_ONLY Este atributo genera una transacción de solo lectura. Modificaciones no son permitidas. 

READ_WRITE Usando este tipo de transacción podemos leer y escribir. Modificaciones son permitidas. 

version_CHANGE Este tipo de transacción es solo utilizada para actualizar la versión de la base de datos. 

Las mas comunes son las transacciones de lectura y escritura. Sin embargo, para prevenir un uso 
inadecuado, el tipo READ_ONLY (solo lectura) es configurado por defecto. Por este motivo, cuando solo 
necesitamos obtener información de la base de datos, lo unico que debemos hacer es declarar el destino de la 
transacción (normalmente el nombre del Almacen de Objetos de donde vamos a leeresta información). 


Metodos de Almacenes de Objetos 


Para interactuar eon Almacenes de Objetos, leer y almacenar información, la API provee varios metodos: 

add(objeto) Este metodo recibe un par clave/valor o un objęto conteniendo varios pares clave/valor, y eon los 
datos provistos genera un objęto que es agregado al Almacen de Objetos seleccionado. Si un objęto eon 
el mismo valorde indice ya existe, el metodo add() retorna un error. 

put(objeto) Este metodo es similar al anterior, excepto que si ya existe un objęto eon el mismo valor de 
indice lo sobrescribe. Es util para modificar un objęto ya almacenado en el Almacen de Objetos 
seleccionado. 

get(clave) Podemos leer un objęto especlfico del Almacen de Objetos usando este metodo. El atributo 
clave es el valor del indice del objęto que queremos leer. 

delete(clave) Para eliminar un objęto del Almacen de Objetos seleccionado solo tenemos que llamar a este 
metodo eon el valordel indice del objęto a eliminar. 



11.2 Implementando lndexedDB 


jSuficiente eon la teoria! Es momento de crear nuestra primera base de datos y aplicar algunos de los metodos ya 
mencionados en este capitulo. Vbmos a simular una aplicación para almacenar información sobre peliculas. 
Puede agregar a la base los datos que usted desee, pero para referenda, de aqui en adelante vamos a 
mencionarlos siguientes: 

id: tt0068646 nombre: El Padrino fecha: 1972 

id: tt0086567 nombre: Juegos de Guerra fecha: 1983 

id: ttO111161 nombre: Cadena Perpetua fecha: 1994 

id: ttl 285016 nombre: La Red Social fecha: 2010 

IMPORTANTE: Los nombres de las propiedades (id, nombre yfecha) son los que vamos a utilizar para 
nuestros ejemplos en el resto del capitulo. La información fue recolectada del sitio web www.imdb.com, 
pero usted puede utilizar su propia lista o información al azar para probar los códigos. 


Plantilla 


Como siempre, necesitamos un documento HTML y algunos estilos CSS para crear las cajas en pantalla que 
contendran el formulario apropiado y la información retornada. El formulario nos permitira insertar nuevas 
peliculas dentro de la base de datos solicitandonos una clave, el titulo yel ano en el que la pelicula fue realizada. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>IndexedDB API</title> 

<link rel="stylesheet" href="indexed.css"> 

<script src="indexed. js"X/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Clave:<br><input type="text" name="clave" id="clave"x/p> 
<p>Titulo :<brxinput type="text" name="texto" id="texto"x/p> 
<p>Ano:<brxinput type="text" name="fecha" id="fecha"x/p> 
<pxinput type="button" name="grabar" id="grabar" 

value="Grabar"x/p> 

</form> 

</section> 

<section id="cajadatos"> 

No hay información disponible 
</section> 

</body> 

</html> 


Listado 11-1. Plantilla para lndexedDB API. 

Los estilos CSS definen las cajas para el formulario y como mostrar la información en pantalla: 


#caj aformulario{ 
float: left; 
padding: 20px; 
border: lpx solid #999999; 

} 

#caj adatos{ 
float: left; 
width: 400px; 
margin-left: 20px; 
padding: 20px; 






border: lpx solid #999999; 

} 

#clave, #texto{ 
width: 200px; 

} 

tcajadatos > div{ 
padding: 5px; 

border-bottom: lpx solid #999999; 


Listado 11-2. Estilos para las cajas. 

Hagalo usted mismo: Necesitara un archivo HTML para la plantilla del Listado 11-1 , un archivo CSS llamado 
indexed.css para los estilos del Listado 11-2 yun archivo Javascript llamado indexed.js para introducir 
todos los códigos estudiados a continuación. 


Abriendo la base de datos 


Lo primero que debemos hacer en el código Javascript es abrir la base de datos. El atributo indexedDB y el 
metodo open() abren la base eon el nombre declarado o crean una nueva si no existe: 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 

var boton=document.getElementByld('grabar'); 

boton.addEventListener('click', agregarobjeto, false); 

if ( 'webkitIndexedDB' in window) { 

window.indexedDB=window.webkitIndexedDB; 
window.IDBTransaction=window.webkitlDBTransaction; 
window.IDBKeyRange=window.webkitlDBKeyRange; 
window.IDBCursor=window.webkitlDBCursor; 

}else if('mozIndexedDB' in window){ 
window.indexedDB=window.moz!ndexedDB; 


var solicitud=indexedDB.open('mibase'); 

solicitud.addEventListener('error', errores, false); 

solicitud.addEventListener ('success', crear, false); 


Listado 11-3. Abriendo la base de datos. 

La función iniciar() del Listado 11-3 prepara los elementos de la plantilla y abre la base de datos. La 
instrucción indexedDB.open() intenta abrir la base de datos eon el nornbremibase y retorna el objęto 
solicitud eon el resultado de la operación. Los eventos error o success son disparados sobre este objęto en 
caso de error o exito, respectivamente. 

IMPORTANTE: Al momento de escribir estas lineas la API se eneuentra en estado experimental. Algunos 
atributos, incluyendo indexedDB, necesitan el prefijo del navegador para trabajar apropiadamente. Antes de 
abrir la base de datos en la función iniciar () detectamos la existencia de webkitindexedDB o 
mozindexedDB y preparamos los atributos para cada uno de estos navegadores especificos (Google 
Chrome o Firefox). Luego de que este periodo experimental termine podremos eliminarel condicional if al 
comienzo del código del Listado 11-3 y utilizar los metodos reales. 

Los eventos son una parte importante de esta API. lndexedDB es una API sfnerona y asinerona. La parte 
sinerona esta siendo desarrollada en estos momentos y esta destinada a trabajar eon la API Web Workers. En 
cambio, la parte asfnerona esta destinada a un uso web normal y ya se eneuentra disponible. Un sistema 
asinerono realiza tareas detras de escena y retorna los resultados posteriormente. Con este propósito, esta API 
dispara diferentes eventos en cada operación. Cada acción sobre la base de datos ysu contenido es procesada 
detras de escena (mientras el sistema ejecuta otros códigos) y los eventos correspondientes son disparados 
luego para informarlos resultados obtenidos. 

Luego de que la API procesa la solicitud para la base de datos, un evento error o success es disparado de 






acuerdo al resultado y una de las funciones errores() o crear() es ejecutada para controlar los errores o 
continuarcon la definición de la base de datos, respectivamente. 


Versión de la base de datos 


Antes de comenzar a trabajar en el contenido de la base de datos, debemos seguir algunos pasos para 
completarsu definición. Como dijimos anteriormente, las bases de datos lndexedDB usan versiones. Cuando la 
base de datos es creada, un valornull (nulo) es asignado a su versión. Por lo tanto, controlando este valor 
podremos sabersi la base de datos es nueva o no: 


function errores(e){ 

alert('Error: '+e.codet' '+e.message); 

} 

function crear(e){ 

bd=e.result || e.target.result; 
if(bd.version=='') { 

var solicitud=bd.setVersion('1.0'); 

solicitud.addEventListener('error', errores, false); 
solicitud.addEventListener('success', crearbd, false); 


} 


Listado 11-4. Declarando la versión y respondiendo a eventos. 

Nuestra función errores () es simple (no necesitamos procesar errores para esta aplicación de muestra). En 
este ejemplo solo usamos los atributos codę ymessage de la interface IDBErrorEvent para generar un mensaje 
de alerta en caso de error. La función crear (), por otro lado, sigue los pasos correctos para detectar la versión 
de la base de datos y proveer un valor de versión en caso de que sea la primera vez que la aplicación es 
ejecutada en este ordenador. La función asigna el objęto result creado por el evento a la variable bd y usa esta 
variable para representar la base de datos (esta variable se definió como global para referenciar la base de datos 
en el resto del código). 

IMPORTANTĘ: En este momento algunos navegadores envian el objęto result a traves del evento yotros a 
traves del elemento que disparó el evento. Para seleccionar la referenda correcta de forma automatica, 
usamos la lógica e. result | | e. target. result. Seguramente usted debera usar solo uno de estos 
valores en sus aplicaciones cuando las implementaciones esten listas. 

La interface IDBDatabase provee la propiedad version para informar el valor de la versión actual y tambien 
provee el metodo setVersion() para declarar una nueva versión. Lo que hacemos en la función crear () en el 
Listado 11-4 es detectar el valor actual de la versión de la base de datos y declarar uno nuevo si es necesario (en 
caso de que el valor sea una cadena de texto vacla). Si la base de datos ya existe, el valor de la propiedad 
version sera diferente de nuli (nulo) y no tendremos que configurar nada, pero si esta es la primera vez que el 
usuario utiliza esta aplicación entonces deberemos declarar un nuevo valor para la versión y configurar la base de 
datos. 

El metodo setVersion () recibe una cadena de texto que puede ser un numero o cualquier valor que se nos 
ocurra, solo debemos estar seguros de que siempre usamos el mismo valor en cada código para abrir la versión 
correcta de la base de datos. Este metodo es, asf como cualquier otro procedimiento en esta API, asfncrono. La 
versión sera establecida detras de escena y el resultado sera informado al código principal a traves de eventos. Si 
ocurre un error en el proceso, llamamos a la función errores () como lo hicimos anteriormente, pero si la versión 
es establecida correctamente entonces la función crearbd () es llamada para declarar los Almacenes de 
Objetos e indices que usaremos en esta nueva versión. 


Almacenes de Objetos e indices 


Aeste punto debemos comenzar a pensar sobre la clase de objetos que vamos a almacenar y como vamos a leer 
mas adelante la información contenida en los Almacenes de Objetos. Si hacemos algo mai o queremos agregar 
algo en la configuración de nuestra base de datos en el futuro deberemos declarar una nueva versión y migrar los 
datos desde la anterior, por lo que es importante tratar de organizar todo lo mejor posible desde el principio. Esto 
es debido a que la creación de Almacenes de Objetos e indices solo es posible durante una transacción 
setYersion. 



function crearbd(){ 

var almacen=bd.createObjectStore('peliculas', {keyPath:'id'}); 
almacen.createlndex('BuscarFecha', 'fecha',{unique: false}); 

} 


Listado 11-5. Declarando Almacenes de Objetos e indices. 

Para nuestro ejemplo solo necesitamos un Almacen de Objetos (para almacenar peliculas) ydos Indices. El 
primer indice, id, es declarado como el atributo clave para el metodo createObj ectStore () cuando el 
Almacen de Objetos es creado. El segundo Indice es asignado al Almacen de Objetos usando el metodo 
createindex (). Este Indice fue identificado eon el nombre BuscarFecha y declarado para la propiedad fecha 
(esta propiedad es ahora un Indice). Mas adelante vamos a usar este Indice para ordenar peliculas por ano. 


Agregando Objetos 


Por el momento tenemos una base de datos eon el nombre mibase que tendra el valor de versión 1 . 0 y contendra 
un Almacen de Objetos llamado peliculas eon dos Indices: id yfecha. Con esto ya podemos comenzar a 
agregar objetos en el almacen: 


function agregarobjeto (){ 

var clave=document.getElementByld('clave').value; 
var titulo=document.getElementByld('texto').value; 
var fecha=document.getElementByld('fecha').value; 

var transaccion=bd.transaction(['peliculas'] , 

IDBTransaction.READ_WRITE); 
var almacen=transaccion.objectStore('peliculas'); 

var solicitud=almacen.add({id: clave, nombre: titulo, fecha: 

fecha}); 

solicitud.addEventListener('success', function (){ 

mostrar(clave) }, false); 

document.getElementByld('clave').value=''; 
document.getElementByld('texto').value=''; 
document.getElementByld('fecha').value=''; 

} 


Listado 11-6. Agregando objetos. 

Al comienzo de la función iniciar() hablamos agregado al botón del formulario una escucha para el evento 
click. Esta escucha ejecuta la función agregarobjęto () cuando el evento es disparado (el botón es 
presionado). Esta función toma los valores de los campos del formulario (clave, texto yfecha) y luego genera 
una transacción para almacenar un nuevo objęto usando esta información. 

Para comenzar la transacción, debemos usar el metodo transaction (), especificar el Almacen de Objetos 
involucrado en la transacción yel tipo de transacción a realizar. En este caso el almacen es peliculas yel tipo es 
declarado como read_write. 

El próximo paso es seleccionar el Almacen de Objetos que vamos a usar. Debido a que la transacción puede 
ser originada para varios Almacenes de Objetos, tenemos que declarar cual corresponde con la siguiente 
operación. Usando el metodo objeetstore () abrimos el Almacen de Objetos y lo asignamos a la transacción 
con la siguiente linea: transacción. objeetstore (' peliculas ' ). 

Es momento de agregar el objęto alAlmacen de Objetos. En este ejemplo usamos el metodo add() debido a 
que queremos crear un nuevo objęto, pero podriamos haber utilizado el metodo put() en su lugar si nuestra 
intensión hubiese sido modificar un viejo objęto. El metodo add() genera el objęto usando las propiedades id, 
nombre y fecha y las variables clave, titulo y fecha. 

Finalmente, escuchamos al evento disparado por esta solicitud yejecutamos la función mostrar () en caso 
de exito. Existe tambien un evento error, por supuesto, pero como la respuesta a los errores depende de lo que 
usted guiera para su aplicación, no consideramos esa posibilidad en este ejemplo. 









Leyendo Objetos 


Si el objęto es correctamente almacenado, el evento success es disparado y la función mostrar () es ejecutada. 
En el código del Listado 11-6, esta función fue llamada dentro de una función anonima para poder pasar la 
variable clave. Ahora vamos a tomar este valor para leer el objęto previamente almacenado: 


function mostrar(clave){ 

var transaccion=bd.transaction(['peliculas' ]) ; 
var almacen=transaccion.objectStore('peliculas'); 
var solicitud=almacen.get(clave); 

solicitud.addEventListener('success', mostrarlista, false); 

} 

function mostrarlista(e){ 

var resultado=e.result II e.target.result; 

caj adatos.innerHTML='<div>'+resultado.id+' - 'tresultado.nombref' 

- '+resultado.fecha+'</div>'; 


Listado 11-7. Leyendo y mostrando el objęto almacenado. 

El código del Listado 11-7 genera una transacción read_ONLY y usa el metodo get () para leer el objęto eon la 
clave recibida. No tenemos que declarar el tipo de transacción porque read_ONLY es establecido por defecto. 

El metodo get() retorna el objęto almacenado eon la propiedad id=clave. Si, por ejemplo, insertamos la 
pelfcula El Padrino de nuestra lista, la variable clave tendra el valor “tt0068646”. Este valor es recibido por la 
función mostrar () y usado por el metodo get () para leer la pelicula El Padrino. Como puede ver, este código es 
solo ilustrativo ya que solo puede retornar la misma pelicula que acabamos de almacenar. 

Como cada operación es asfnerona, necesitamos dos funciones para mostrar la información. La función 
mostrar () genera la transacción y lee el objęto, y la función mostrarlista () muestra los valores de las 
propiedades del objęto en pantalla. Otrą vez, solo estamos escuchando al evento success, pero un evento error 
podria ser disparado en caso de que el objęto no pueda ser leido por alguna circunstancia en particular. 

La función mostrarlista () recibe un objęto. Para acceder a sus propiedades solo tenemos que usar la 
variable representando al objęto y el nombre de la propiedad, como en resultado.id (la variable resultado 
representa el objęto e id es una de sus propiedades). 


Finalizando el código 


Del mismo modo que cualquier código previo, el ejemplo debe ser finalizado agregando una escucha para el 
evento load que ejecute la función iniciar () tan pronto como la aplicación es cargada en la ventana del 
navegador: 


window.addEventListener('load', iniciar, false); 


Listado 11-8. Iniciando la aplicación. 

Hagalo usted mismo: Es momento de probar la aplicación en el navegador. Copie todos los códigos 
Javascript desde el Listado 11-3 al Listado 11-8 en el archivo indexed. js yabra el documento HTML del 
Listado 11-1. Usando el formulario en la pantalla, inserte información acerca de las peliculas listadas al 
comienzo de este capltulo. Cada vez que una nueva pelicula es insertada, la misma información es 
mostrada en la caja de la derecha. 





11.3 Listando datos 


El metodo get() implementado en el código del Listado 11-7 solo retorna un objęto por vez (el ultimo insertado). 
En el siguiente ejemplo vamos a usar un cursor para generar una lista incluyendo todas las peliculas 
almacenadas en el Almacen de Objetos peliculas. 


Cursores 


Los cursores son una alternativa ofrecida por la API para obtener y navegar a traves de un grupo de objetos 
encontrados en la base de datos. Un cursor obtiene una lista especifica de objetos de un Almacen de Objetos e 
inicia un puntero que apunta a un objęto de la lista a la vez. 

Para generar un cursor, la API provee el metodo openCursor (). Este metodo extrae información del Almacen 
de Objetos seleccionado y retorna un objęto IDBCursor que tiene sus propios atributos y metodos para manipular 
el cursor: 

continue() Este metodo mueve el puntero del cursor una posición y el evento success del cursor es 
disparado nuevamente. Cuando el puntero alcanza el finał de la lista, el evento success es tambien 
disparado, pero retorna un objęto vacio. El puntero puede ser movido a una posición especifica 
declarando un valorde indice dentro de los parentesis. 

deletej) Este metodo elimina el objęto en la posición actual del cursor. 

update(valor) Este metodo es similar aput() pero modifica el valor del objęto en la posición actual del 
cursor. 

El metodo openCursor () tambien tiene atributos para especificar el tipo de objetos retornados y su orden. 
Los valores por defecto retornan todos los objetos disponibles en el Almacen de Objetos seleccionado, 
organizados en orden ascendente. Estudiaremos este tema mas adelante. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 

var boton=document.getElementByld('grabar'); 

boton.addEventListener('click', agregarobjeto, false); 

if ( 'webkitIndexedDB' in window){ 

window.indexedDB=window.webkitIndexedDB; 
window.IDBTransaction=window.webkitlDBTransaction; 
window.IDBKeyRange=window.webkitlDBKeyRange; 
window.IDBCursor=window.webkitIDBCursor; 

}else if('mozIndexedDB' in window){ 
window.indexedDB=window,mozIndexedDB; 

} 

var solicitud=indexedDB.open('mibase'); 

solicitud.addEventListener('error', errores, false); 

solicitud.addEventListener ('success', crear, false); 

} 

function errores (e){ 

alert('Error: '+e.codef' '+e.message); 

} 

function crear(e){ 

bd=e.result || e.target.result; 
if(bd.version==''){ 

var solicitud=bd.setVersion('1.0'); 

solicitud.addEventListener('error', errores, false); 
solicitud.addEventListener('success', crearbd, false); 
}else{ 

mostrar () ; 


function crearbd(){ 

var almacen=bd.createObjectStore('peliculas',{keyPath: 'id'}); 

almacen.createlndex('BuscarFecha', 'fecha',{unigue: false}); 


function agregarobjeto (){ 

var clave=document.getElementByld('clave').value; 
var titulo=document.getElementByld('texto').value; 
var fecha=document.getElementByld('fecha').value; 
var transaccion=bd.transaction(['peliculas'] , 

IDBTransaction.READ_WRITE); 
var almacen=transaccion.objectStore('peliculas'); 
var solicitud=almacen.add({id: clave, nombre: titulo, fecha: 

fecha}); 

solicitud.addEventListener('success', mostrar, false); 
document.getElementByld('clave').value=''; 
document.getElementByld('texto').value=''; 
document.getElementByld('fecha').value=''; 

} 

function mostrarf){ 

cajadatos.innerHTML=''; 

var transaccion=bd.transaction(['peliculas' ] ) ; 
var almacen=transaccion.objectStore('peliculas'); 
var cursor=almacen.openCursor(); 

cursor.addEventListener('success', mostrarlista, false); 

} 

function mostrarlista(e){ 

var cursor=e.result || e.target.result; 
if(cursor){ 

cajadatos.innerHTML+='<div>'łcursor.value.id+' - 

'łcursor.value.nombreł' - 'łcursor.value.fecha+'</div>'; 
cursor.continue(); 

} 

} 

window.addEventListener('load', iniciar, false); 


Listado 11-9. Lista de objetos. 

El Listado 11-9 muestra el código Javascript compieto que necesitamos para este ejemplo. De las funciones 
usadas para configurar la base de datos, solo crearf) presenta un pequeńo cambio. Ahora, cuando la versión 
de la base de datos sea diferente a nuli (lo que significa que la base de datos ya ha sido creada) la función 
mostrar () es ejecutada. Esta función ahora se encuentra a cargo de mostrar la lista de objetos almacenados en 
el Almacen de Objetos, porlo que si la base de datos ya existe veremos una lista de objetos en la caja derecha de 
la pantalla tan pronto como la pagina web es cargada. 

La mejora introducida en este código se encuentra en las funciones mostrar () ymostrarlista (). Aqui es 
donde trabajamos eon cursores por primera vez. 

Leer información de la base de datos eon un cursor es tambien una operación que debe hacerse a traves de 
una transacción. Por este motivo, lo primero que hacemos en la función mostrar () es generar una transacción 
del tipo read_ONLY sobre el Almacen de Objetos peliculas. Este Almacen de Objetos es seleccionado como el 
involucrado en la transacción yluego el cursores abierto sobre este almacen usando el metodo openCursor (). 

Si la operación es exitosa, un objęto es retornado eon toda la información obtenida del Almacen de Objetos, un 
evento success es disparado desde este objęto yla función mostrarlista () es ejecutada. 

Para leer la información, el objęto retornado por la operación ofrece varios atributos: 

key Este atributo retorna el valor de la clave del objęto en la posición actual del cursor. 

value Este atributo retorna el valor de cualquier propiedad del objęto en la posición actual del cursor. El 
nombre de la propiedad debe ser especificado como una propiedad del atributo (por ejemplo, 
value. fecha). 

direction Los objetos pueden ser leidos en orden ascendente o descendente (como veremos mas 
adelante); este atributo retorna la condición actual en la cual son leidos. 

count Este atributo retorna en numero aproximado de objetos en el cursor. 

En la función mostrarlista () del Listado 11-9, usamos el condicional if para controlar el contenido del 
cursor. Si ningun objęto es retornado o el puntero alcanza el finał de la lista, entonces el objęto estara vaclo yel 
bucie no es continuado. Sin embargo, cuando el puntero apunta a un objęto valido, la información es mostrada en 
pantalla yel puntero es movido hacia la siguiente posición eon continue (). 

Es importante mencionar que no debemos usar un bucie while aqui debido a que el metodo continue () 



dispara nuevamente el evento success del cursoryla función completa es ejecutada para leerel siguiente objęto 
retornado. 

Hagalo usted mismo: El código del Listado 11-9 reemplaża todos los códigos Javascript previos. Vaci'e el 
archivo indexed. js ycopie en su interioreste nuevo código.Abra la plantilla del Listado 11-1 y, si aun no lo 
hizo, inserte todas las peliculas del listado encontrado al comienzo de este capitulo. Vera la lista completa 
de pelfculas en la caja derecha de la pantalla en orden ascendente, de acuerdo al valorde la propiedad id. 


Cambio de orden 


Hay dos detalles que necesitamos modificar para obtener la lista que queremos. Todas las pelfculas en nuestro 
ejemplo estan listadas en orden ascendente y la propiedad usada para organizar los objetos es id. Esta es la 
propiedad declarada como el atributo clave cuando el Almacen de Objetos peliculas fue creado, yes portanto 
el fndice usado por defecto. Pero esta clase de valores no es lo que a nuestros usuarios normalmente les 
interesa. 

Considerando esta situación, creamos otro fndice en la función crearbd() . El nombre de este fndice 
adicional fue declarado como BuscarFecha y la propiedad asignada al mismo es fecha. Este fndice nos 
permitira ordenar las pelfculas de acuerdo al valor del ano en el que fueron filmadas. 


function mostrarf){ 

cajadatos.innerHTML='' ; 

var transaccion=bd.transaction(['peliculas']); 
var almacen=transaccion.objectStore('peliculas'); 
var indice=almacen.index('BuscarFecha'); 

var cursor=indice.openCursor(nuli, IDBCursor.PREV); 

cursor.addEventListener('success', mostrarlista, false); 


Listado 11-10. Orden descendiente porano. 

La función en el Listado 11-10 reemplaza a la función mostrarf) del código del Listado 11-9. Esta nueva 
función genera una transacción, luego asigna el fndice BuscarFecha al Almacen de Objetos usado en la 
transacción, yfinalmente usa openCursor () para obtener los objetos que tienen la propiedad correspondiente al 
fndice (en este caso fecha). 

Existen dos atributos que podemos especificar en openCursor () para seleccionar y ordenar la información 
obtenida por el cursor. El primer atributo declara el rango dentro del cual los objetos seran seleccionados y el 
segundo es una de las siguientes constantes: 

NEXT (siguiente). El orden de los objetos retornados sera ascendente (este es el valor por defecto). 

NEXT_NO_DUPLICATE (siguiente no duplicado). El orden de los objetos retornados sera ascendente y los 
objetos duplicados seran ignorados (solo el primer objęto es retornado si varios comparten el mismo 
valor de fndice). 

PREV (anterior). El orden de los objetos retornados sera descendente. 

PREV_NO_DUPLICATE (anterior no duplicado). El orden de los objetos retornados sera descendente y los 
objetos duplicados seran ignorados (solo el primer objęto es retornado si varios comparten el mismo 
valor de fndice). 

Con el metodo openCursor () usado en la función mostrarf) en el Listado 11-10, obtenemos los objetos en 
orden descendente y declaramos el rango como nuli. Vamos a aprender como construir un rango y retornar solo 
los objetos deseados mas adelante en este capitulo. 

Hagalo usted mismo: Tome el código anterior presentado en el Listado 11-9 y reem place la función showf) 
con la nueva función del Listado 11-10. Esta nueva función lista las pelfculas en la pantalla por ario y en 
orden descendente (las mas nuevas primero). El resultado deberfa serel siguiente: 

id: ttl 285016 nombre: La Red Social fecha: 2010 

id: ttO111161 nombre: Cadena Perpetua fecha: 1994 

id:tt0086567 nombre: Juegos de Guerra fecha: 1983 

id: tt0068646 nombre: El Padrino fecha: 1972 




11.4 Eliminando datos 


Hemos aprendido como agregar, leer y listar datos. Es hora de estudiar la posibilidad de eliminar objetos de un 
Almacen de Objetos. Como mencionamos anteriormente, el metodo delete () provisto por la API recibe un valor y 
elimina el objęto eon la clave correspondiente a ese valor. 

El código es sencillo; solo necesitamos crear un botón para cada objęto listado en pantalla y generar una 
transacción read_write para poder realizar la operación y eliminar el objęto: 


function mostrarlista(e){ 

var cursor=e.result || e.target.result; 
if(cursor){ 

caj adatos.innerHTML+='<div>'łcursor.value.id+' - 

'łcursor.value.nombret' - 'łcursor.value.fecha+' cbutton 
onclick="eliminar(\''łcursor.value.id+'\')">Eliminar 

</button></div>'; 

cursor.continue (); 


function eliminar(clave){ 

if(confirm('Esta Seguro?')){ 

var transaccion=bd.transaction(['peliculas'], 

IDBTransaction.READ_WRITE); 
var almacen=transaccion.objectStore('peliculas'); 
var solicitud=almacen.delete(clave); 

solicitud.addEventListener('success', mostrar, false); 



Listado 11-11. Eliminando objetos. 

El botón agregado a cada pelicula en la función mostrarlista () del Listado 11-11 contiene un manejador de 
eventos en linea. Cada vezque el usuario hace clic en uno de estos botones, la función eliminar () es ejecutada 
eon el valor de la propiedad id como su atributo. Esta función genera primero una transacción read_write y 
luego usando la clave recibida procede a eliminar el correspondiente objęto del Almacen de Objetos peliculas. 

Al finał, si la operación fue exitosa, el evento success es disparado yla función mostrar () es ejecutada para 
actualizar la lista de peliculas en pantalla. 

Hagalo usted mismo: Tome el código anterior del Listado 11-9, reemplace la función mostrarlista () y 
agregue la función eliminar () del código del Listado 11-11. Finalmente, abra el documento HTML del 
Listado 11-1 para probar la aplicación. Podrą ver el listado de peliculas pero ahora cada linea incluye un 
botón para eliminar la pelicula del Almacen de Objetos. Experimente agregando y eliminando peliculas. 



11.5 Buscando datos 


Probablemente la operación mas importante realizada en un sistema de base de datos es la busqueda. El 
propósito absoluto de esta clase de sistemas es indexar la información almacenada para facilitar su posterior 
busqueda. Como estudiamos anteriormente es este capltulo, el metodo get() es util para obtener un objęto por 
vezcuando conocemos el valorde su clave, pero una operación de busqueda es usualmente mas compleja que 
esto. 

Para obtener una lista especlfica de objetos desde el Almacen de Objetos, tenemos que pasar un rango como 
argumento para el metodo openCursor (). La API incluye la interface IDBKeyRange eon varios metodos y 
propiedades para declarar un rango y limitar los objetos retornados: 

only(valor) Solo los objetos eon la clave que concuerda eon valor son retornados. Por ejemplo, si 
buscamos peliculas por ario usando only ("1972") , solo la pelicula El Padrino sera retornada desde el 
almacen. 

bound(bajo, alto, bajoAbierto, altoAbierto) Para realmente crear un rango, debemos contar eon valores que 
indiquen el comienzo y el finał de la lista, y ademas especificar si esos valores tambien seran incluidos. 
El valor del atributo bajo indica el punto inicial de la lista y el atributo alto es el punto finał. Los atributos 
bajoAbierto yaltoAbierto son valores booleanos usados para declarar si los objetos que 
concuerdan exactamente eon los valores de los atributos bajo yalto seran ignorados. Por ejemplo, 
bound("1972", "2010", false, true) retornara una lista de peliculas filmadas desde el ano 1972 
hasta el ano 2010, pero no incluira las realizadas especlficamente en el 2010 debido a que el valor es 
true (verdadero) para el punto donde el rango termina, lo que indica que el finał es abierto y las 
peliculas de ese ano no son incluidas. 

lowerBound(valor, abierto) Este metodo crea un rango abierto que comenzara porvalor e ira hacia arriba 
hasta el finał de la lista. Por ejemplo, lowerBound("1983", true) retornara todas las peliculas 
hechas luego de 1983 (sin incluir las filmadas en ese ano en particular). 

upperBound(valor, abierto) Este es el opuesto al anterior. Creara un rango abierto, pero los objetos 
retornados seran todos los que posean un valor de indice menor a valor. Por ejemplo, 
upperBound(" 1983 ", false) retornara todas las peliculas hechas antes de 1983, incluyendo las 
realizadas ese mismo ano (el atributo abierto fue declarado como false). 

Preparemos primero una nueva plantilla para presentar un formulario en pantalla eon el que se pueda buscar 
peliculas: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>IndexedDB API</title> 

<link rel="stylesheet" href="indexed.css"> 

<script src="indexed. js"X/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Buscar Pelicula por Ano:<br><input type="search" 

name="fecha" id="fecha"X/p> 
<pxinput type="button" name="buscar" id="buscar" 

value="Buscar"x/p> 

</form> 

</section> 

<section id="cajadatos"> 

No hay información disponible 
</section> 

</body> 

</html> 


Listado 11-12. Formulario de busqueda. 

Este nuevo documento HTML provee un botón y un campo de texto donde ingresar el ario para buscar 
peliculas de aeuerdo a un rango especificado en el siguiente código: 






function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 

var boton=document.getElementByld('buscar'); 

boton.addEventListener('click', buscarobjetos, false); 

if ('webkitIndexedDB' in window) { 

window.indexedDB=window.webkitIndexedDB; 
window.IDBTransaction=window.webkitlDBTransaction; 
window.IDBKeyRange=window.webkitlDBKeyRange; 
window.IDBCursor=window.webkitlDBCursor; 

}else if('mozIndexedDB' in window){ 
window.indexedDB=window,mozIndexedDB; 

} 

var solicitud=indexedDB.open('mibase'); 

solicitud.addEventListener('error', errores, false); 

solicitud.addEventListener ('success', crear, false); 

} 

function errores (e){ 

alert('Error: '+e.code+' '+e.message); 

} 

function crear(e){ 

bd=e.result || e.target.result; 
if(bd.version==''){ 

var solicitud=bd.setVersion('1.0'); 

solicitud.addEventListener('error', errores, false); 
solicitud.addEventListener('success 1 , crearbd, false); 


function crearbd(){ 

var almacen=bd.createObjectStore('peliculas', {keyPath: 'id'}); 
almacen.createlndex('BuscarFecha', 'fecha', { uniąue: false }); 

} 

function buscarobjetos (){ 
caj adatos.innerHTML=''; 

var buscar=document.getElementByld('fecha').value; 

var transaccion=bd.transaction(['peliculas']); 
var almacen=transaccion.objectStore ('peliculas'); 
var indice=almacen.index('BuscarFecha'); 
var rango=IDBKeyRange.only(buscar); 

var cursor=indice.openCursor(rango); 

cursor.addEventListener('success', mostrarlista, false); 

} 

function mostrarlista (e){ 

var cursor=e.result || e.target.result; 
if(cursor){ 

caj adatos.innerHTML+='<div>'łcursor.value.id+' - 

'łcursor.value.nombref' - 'łcursor.value.fechaf'</div>'; 
cursor.continue (); 


window.addEventListener('load', iniciar, false); 


Listado 11-13. Buscando peliculas. 

La función buscarobjetos () es la mas importante del Listado 11-13. En esta función generamos una 
transacción de solo lectura read_ONLY para el Almacen de Objetos peliculas, seleccionamos el indice 
BuscarFecha para usar la propiedad fecha como indice, y creamos un rango desde el valor de la variable 
buscar (el ario insertado en el formulario por el usuario). El metodo usado para construir el rango es only(), 
pero puede probar eon cualquiera de los metodos estudiados. Este rango es pasado luego como un argumento 
del metodo openCursor (). Si la operación es exitosa, la función mostrarlista () imprimira en pantalla la lista 
de peliculas del ano seleccionado. 

El metodo only() retorna solo las peliculas que concuerdan exactamente eon el valor de la variable buscar. 





Para probar otros metodos, puede proveer valores por defecto para completar el rango, por ejemplo 
bound(buscar, "2011", false, true). 

El metodo openCursor () puede tomar dos posibles atributos al mismo tiempo. Por esta razón, una 
instrucción como openCursor (rango, iDBCursor. prev) es valida y retornara los objetos en el rango 
especificado yen orden descendente (usando como referenda el mismo indice utilizado para el rango). 

IMPORTANTE: La caracteristica de buscar textos se encuentra bajo consideración en este momento, pero 
aun no ha sido desarrollada o incluso incluida en la especificación oficial. Para obtener mas información 
sobre esta API, vi s i te nuestro sitio web ysiga los enlaces correspondientes a este capitulo. 



11.6 Referenda rapida 


La API lndexedDB tiene una infraestructura de bajo nivel. Los metodos y propiedades estudiados en este capitulo 
son solo parte de lo que esta API tiene para ofrecer. Con el propósito de simplificar los ejemplos, no seguimos 
ninguna estructura especifica. Sin embargo, esta API, asi como otras, esta organizada en interfaces. Por ejemplo, 
existe una interface especifica para tratar con la organización de la base de datos, otrą para la creación y 
manipulación de Almacenes de Objetos, etc... Cada interface incluye sus propios metodos y propiedades, por lo 
que ahora vamos a presentar la información compartida en este capitulo siguiendo esta clasificación oficial. 

IMPORTANTE: Las descripciones presentadas en esta referenda rapida solo muestran los aspectos mas 
relevantes de cada interface. Para estudiar la especificación completa, visite nuestro sitio web y siga los 
enlaces correspondientes a este capitulo. 


Interface Environment (IDBEnvironment y IDBFactory) 


La interface Environment, o IDBEnvironment, incluye un atributo IDBFactory. Juntas estas interfaces proveen los 
elementos necesarios para operarcon bases de datos: 

indexedDB Este atributo provee un mecanismo para accederal sistema de base de datos indexado. 

open(nombre) Este metodo abre una base de datos con el nombre especificado en su atributo. Si no existe 
una base de datos previa, una nueva es creada con el nombre provisto. 

deleteDatabase(nombre) Este metodo elimina una base de datos con el nombre especificado en su 
atributo. 


Interface Database (IDBDatabase) 


El objęto retornado luego de la apertura o creación de una base de datos es procesado por esta interface. Con 
este objetivo, la interface provee varios metodos y propiedades: 

version Esta propiedad retorna el valorde la versión actual de la base de datos abierta. 

name Esta propiedad retorna el nombre de la base de datos abierta. 

objectStoreNames Esta propiedad retorna un listado de los nombres de los Almacenes de Objetos 
contenidos dentro de la base de datos abierta. 

setVersion(valor) Este metodo establece una nueva versión para la base de datos abierta. El atributo valor 
puede ser cualquier cadena de texto que deseemos. 

createObjectStorefnombre, clave, autolncremento) Este metodo crea un nuevo Almacen de Objetos para 
la base de datos abierta. El atributo nombre representa el nombre del Almacen de Objetos, clave es un 
indice comun para todos los objetos almacenados en este almacen, y autolncremento es un valor 
booleano que activa un generador automatico de claves. 

deleteObjectStore(nombre) Este metodo elimina un Almacen de Objetos con el nombre especificado en su 
atributo. 

transactionfalmacenes, tipo, maximo) Este metodo inicia una transacción con la base de datos. La 
transacción puede ser especificada para uno o mas Almacenes de Objetos declarados en el atributo 
almacenes, y puede ser creada para diferentes tipos de acceso de acuerdo con el atributo tipo. Puede 
tambien recibir un atributo maximo en milisegundos para especificar el tiempo maximo permitido que la 
operación puede tardar en realizarse. Para mayor información sobre como configurar una transacción, 
ver Interface Transaction en esta Referenda rapida. 


Interface Object Storę (IDBObjectStore) 


Esta interface incluye todos los metodos y propiedades necesarios para manipular objetos en un Almacen de 
Objetos (Object Storę). 

name Esta propiedad retorna el nombre del Almacen de Objetos actualmente en uso. 

keyPath Esta propiedad retorna la clave, si existe, del Almacen de Objetos actualmente en uso (esta es la 



clave definida como indice comun en el momento en el que el Almacen de Objetos fue creado). 

lndexNames Esta propiedad retorna una lista de los nombres de los Indices creados para el Almacen de 
Objetos actualmente en uso. 

add(objeto) Este metodo agrega un objęto al Almacen de Objetos seleccionado eon la información provista 
en su atributo. Si un objęto eon el mismo Indice ya existe, un errores retornado. El metodo puede recibir 
un par clave/valor o un objęto conteniendo varios pares clave/valor como atributo. 

put(objeto) Este metodo agrega un objęto al Almacen de Objetos seleccionado eon la información provista 
en su atributo. Si un objęto eon el mismo Indice ya existe, el objęto es sobrescrito eon la nueva 
información. El metodo puede recibir un par clave/valor o un objęto conteniendo varios pares clave/valor 
como atributo. 

get(clave) Este metodo retorna el objęto eon el valordel Indice igual a clave. 

delete(clave) Este metodo elimina el objęto eon el valordel Indice igual a clave. 

createlndex(nombre, propiedad, unico) Este metodo crea un nuevo Indice para el Almacen de Objetos 
seleccionado. El atributo nombre especifica el nombre del Indice, el atributo propiedad declara la 
propiedad de los objetos que sera asociada eon este Indice, y el atributo unico indica si los objetos eon 
un mismo valor de Indice seran permitidos o no. 

index(nombre) Este metodo activa el Indice eon el nombre especificado en su atributo. 

deletelndex(nombre) Este metodo elimina el Indice eon el nombre especificado en su atributo. 

openCursorfrango, dirección) Este metodo crea un cursor para el Almacen de Objetos seleccionado. El 
atributo rango es un objęto rangę (definido por la Interface Rangę) para determinar cuales objetos son 
seleccionados. El atributo dirección establece el orden de estos objetos. Para mayor información 
sobre como configurar y manipular un cursor, ver la Interface Cursors en esta Referenda Rapida. Para 
mayor información sobre como construir un rango eon el objęto rangę, ver la Interface Rangę en esta 
Referenda Rapida. 


Interface Cursors (IDBCursor) 


Esta interface provee valores de configuración para especificar el orden de los objetos seleccionados desde el 
Almacen de Objetos. Estos valores deben ser declarados como el segundo atributo del metodo openCursor (), 
como en openCursor(nuli, IDBCursor.PREV). 

NEXT (siguiente). Esta constante determina un orden ascendente para los objetos apuntados por el cursor 
(este es el valor por defecto). 

NEXT_NO_DUPLICATE (siguiente no duplicado). Esta constante determina un orden ascendente para los 
objetos apuntados porel cursor e ignora los duplicados. 

PREV (anterior). Esta constante determina un orden descendente para los objetos apuntados porel cursor. 

PREV_NO_DUPLICATE (anterior no duplicado). Esta constante determina un orden descendente para los 
objetos apuntados porel cursore ignora los duplicados. 

Esta interface tambien provee varios metodos y propiedades para manipular los objetos apuntados por el 
cursor. 

continue(clave) Este metodo mueve el puntero del cursor hacia el siguiente objęto en la lista o hacia el 
objęto referenciado porel atributo clave, si es declarado. 

delete() Este metodo elimina el objęto que actualmente se eneuentra apuntado porel cursor. 

update(valor) Este metodo modifica el objęto actualmente apuntado porel cursor eon el valor provisto por su 
atributo. 

key Esta propiedad retorna el valor del indice del objęto actualmente apuntado por el cursor. 

value Esta propiedad retorna el valorde cualquier propiedad del objęto actualmente apuntado porel cursor. 

direction Esta propiedad retorna el orden de los objetos obtenidos por el cursor (ascendente o 
descendente). 


Interface Transactions (IDBTransaction) 



Esta interface provee valores de configuración para especificar el tipo de transacción que se va a llevar a cabo. 
Estos valores deben ser declarados como el segundo atributo del metodo transaction (), como en 
transaction(almacenes, IDBTransaction. 

READJSRITE) . 

R£AD_ONLY Esta constante configura la transacción como una transacción de solo lectura (este es el valor 
por defecto). 

READ_WRITE Esta constante configura la transacción como una transacción de lectura-escritura. 

VERSION_CHANGE Este tipo de transacción es usado solamente para actualizar el numero de versión de la 
base de datos. 


Interface Rangę (IDBKeyRangeConstructors) 


Esta interface provee varios metodos para la construcción de un rango a ser usado eon cursores: 

only(valor) Este metodo retorna un rango eon los puntos de inicio yfinal iguales a valor. 

bound(bajo, alto, bajoAbierto, altoAbierto) Este metodo retorna un rango eon el punto de inicio declarado 
porbajo, el punto finał declarado por alto, ysi estos valores seran excluidos de la lista de objetos o no 
declarado por los ultimos dos atributos. 

lowerBound(valor, abierto) Este metodo retorna un rango comenzando por valor y terminando al finał de la 
lista de objetos. El atributo abierto determina si los objetos que concuerdan eon valor seran excluidos 
o no. 

upperBound(valor, abierto) Este metodo retorna un rango comenzando desde el inicio de la lista de objetos 
y terminando en valor. El atributo abierto determina si los objetos que concuerdan eon valor seran 
excluidos o no. 


Interface Error (IDBDatabaseException) 


Los errores retornados por las operaciones en la base de datos son informados a traves de esta interface. 

codę Esta propiedad representa el numero de error. 

message Esta propiedad retorna un mensaje describiendo el error. 

El valor retornado tambien puede ser comparado eon las constantes de la siguiente lista para encontrar el 
error correspondiente. 

UNKNOWN_ERR - valor 0. 

NON_TRANSIENT_ERR - valor 1. 

NOT_FOUND_ERR - valor 2. 

CONSTRAINT_ERR - valor 3. 

DATA_ERR - valor 4. 

NOT_ALLOWED_ERR - valor 5. 

TRANSACTION_INACTIVE_ERR - valor 6. 

ABORT_ERR - valor 7. 

READ_ONLY_ERR - valor 11. 

RECOVERABLE_ERR - valor 21. 

TRANSIENT_ERR - valor 31. 

TIMEOUT_ERR - valor 32. 

DEADLOCK_ERR - valor 33. 




Capltulo 12 
API File 


12.1 Almacenamiento de archivos 


Los archivos son unidades de información que usuarios pueden facilmente compartir eon otras personas. Los 
usuarios no pueden compartir el valor de una variable o un par clave/valor como los usados por la API Web 
Storage, pero ciertamente pueden hacer copias de sus archivos y enviarlos por medio de un DVD, memorias 
portatiles, discos duros, transmitirlos a traves de Internet, etc... Los archivos pueden almacenar grandes 
cantidades de datos y ser movidos, duplicados o transmitidos independientemente de la naturaleza de su 
contenido. 

Los archivos fueron siempre una parte esencial de cada aplicación, pero hasta ahora no habfa forma posible 
de trabajar eon ellos en la web. Las opciones estaban limitadas a subir o descargar archivos ya existentes en 
servidores u ordenadores de usuarios. No existia la posibilidad de crear archivos, copiarlos o procesarlos en la 
web... hasta hoy. 

La especificación de HTML5 fue desarrollada considerando cada aspecto necesario para la construcción y 
funcionalidad de aplicaciones web. Desde el diseńo hasta la estructura elemental de los datos, todo fue cubierto. 
Ylos archivos no podian ser ignorados, por supuesto. Por esta razón, la especificación incorpora la API File. 

LAAPI File comparte algunas caracterfsticas eon las API de almacenamiento estudiadas en capitulos previos. 
Esta API posee una infraestructura de bajo nivel, aunque no tan compleja como lndexedDB, yal igual que otras 
puede trabajar de forma sinerona o asinerona. La parte sinerona fue desarrollada para ser usada eon la API Web 
Workers (del mismo modo que lndexedDB y otras APls), y la parte asinerona esta destinada a aplicaciones web 
convencionales. Estas caracteristicas nos obligan nuevamente a cuidarcada aspecto del proceso, controlarsi la 
operación fue exitosa o devolvió errores, y probablemente adoptar (o desarrollar nosotros mismos) en el futuro 
APls mas simples construidas sobre la misma. 

API File es una vieja API que ha sido mejorada y expandida. Al dia de hoy esta compuesta por tres 
especificaciones: API File, API File: Directories & System, yAPI File: Writer, pero esta situación puede cambiar 
durante los siguientes meses eon la incorporación de nuevas especificaciones o incluso la unificación de 
algunas de las ya existentes. 

Basicamente, la API File nos permite interactuar eon archivos locales y procesar su contenido en nuestra 
aplicación, la extensión la API File: Directories & System provee las herramientas para trabajar eon un pequeho 
sistema de archivos creado especificamente para cada aplicación, y la extensión API File: Writer es para escribir 
contenido dentro de archivos que fueron creados o descargados por la aplicación. 



12.2 Procesando archivos de usuario 


Trabajar eon archivos locales desde aplicaciones web puede ser peligroso. Los navegadores deben considerar 
medidas de seguridad antes de siquiera contemplar la posibilidad de dejar que las aplicaciones tengan acceso a 
los archivos del usuario. Aeste respecto, File API provee solo dos metodos para cargar archivos desde una 
aplicación: la etiqueta <input>yla operación arrastrar y soltar. 

En el Capitulo 8 aprendimos como usar la API Drag and Drop para arrastrar archivos desde una aplicación de 
escritorio ysoltarlos dentro de un espacio en la pagina web. La etiqueta <input> (tambien estudiada en capftulos 
anteriores), cuando es usada eon el tipo file, trabaja de forma similar a API Drag and Drop. Ambas tecnicas 
transmiten archivos a traves de la propiedad files. Del mismo modo que lo hicimos en ejemplos previos, lo 
unico que debemos hacer es explorar el valor de esta propiedad para obtener cada archivo que fue seleccionado 
o arrastrado. 

IMPORTANTE: Esta API y sus extensiones no trabajan en este momento desde un servidor local, y solo 
Google Chrome y Firefox tienen implementaciones disponibles. Algunas de estas implementaciones son 
tan nuevas que solo trabajan en navegadores experimentales como Chromium ( www.chromium.org ) o 
FirefoxBeta. Para ejecutar los códigos de este capftulo, debera usar las ultimas versiones de navegadores 
disponibles ysubirtodos los archivos a su servidor. 


Plantilla 


En esta primera parte del capftulo vamos a usar la etiqueta <input> para seleccionar archivos, pero usted puede, 
si lo desea, aprovechar la información en el Capftulo 8 para integrar estos códigos eon API Drag and Drop. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>File API</title> 

<link rel="stylesheet" href="file.css"> 

<script src="f ile . j s"X/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Archivos: <brXinput type="file" name="archivos" 

id="archivos "></p> 

</form> 

</section> 

<section id="cajadatos"> 

No se seleccionaron archivos 
</section> 

</body> 

</html> 


Listado 12-1. Plantilla para trabajar eon los archivos del usuario. 

El archivo CSS incluye estilos para esta plantilla y otros que vamos a usar mas adelante: 


#caj aformulario{ 
float: left; 
padding: 20px; 
border: lpx solid #999999; 

} 

#caj adatos{ 
float: left; 
width: 500px; 
margin-left: 20px; 
padding: 20px; 
border: lpx solid #999999; 





directorio{ 
color: tOOOOFF; 
font-weight: bold; 
cursor: pointer; 


Listado 12-2. Estilos para el formulario y la cajadatos. 


Leyendo archivos 


Para leer archivos en el ordenador de los usuarios tenemos que usar la interface FileReader. Esta interface 
retorna un objęto eon varios metodos para obtenerel contenido de cada archivo: 

readAsText(archivo, codificación) Para procesar el contenido como texto podemos usar este metodo. Un 
evento load es disparado desde el objęto FileReader cuando el archivo es cargado. El contenido es 
retornado codificado como texto UTF-8 a menos que el atributo codificación sea especificado eon un 
valor diferente. Este metodo intentara interpretar cada byte o una secuencia de multiples bytes como 
caracteres de texto. 

readAsBinaryString(archivo) La información es leida por este metodo como una sucesión de enteros en el 
rango de 0 a 255. Este metodo nos asegura que cada byte es leido como es, sin ningun intento de 
interpretación. Es util para procesar contenido binario como imagenes o videos. 

readAsDataURL(archivo) Este metodo genera una cadena del tipo data:url codificada en base64 que 
representa los datos del archivo. 

readAsArrayBuffer(archivo) Este metodo retorna los datos del archivo como datos del tipo ArrayBuffer. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 
var archivos=document.getElementByld('archivos'); 
archivos.addEventListener('change', procesar, false); 

} 

function procesar (e){ 

var archivos=e.target.files; 
var archivo=archivos[0]; 

var lector=new FileReader(); 

lector.onload=mostrar; 

lector.readAsText(archivo); 

} 

function mostrar(e){ 

var resultado=e.target.result; 
caj adatos.innerHTML=resultado; 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-3. Leyendo un archivo de texto. 

Desde el campo archivos del documento HTML del Listado 12-1 el usuario puede seleccionar un archivo 
para ser procesado. Para detectar esta acción, en la función iniciar () del Listado 12-3 agregamos una 
escucha para el evento change. De este modo, la función procesar () sera ejecutada cada vezque algo cambie 
en el elemento <input> (un nuevo archivo es seleccionado). 

La propiedad files enviada por el elemento <input> (y tambien por la API Drag and Drop) es un array 
conteniendo todos los archivos seleccionados. Cuando el atributo multiple no esta presente en la etiqueta 
<input> no es posible seleccionar multiples archivos, por lo que el primer elemento del array sera el unico 
disponible. Al comienzo de la función procesar () tomamos el contenido de la propiedad files, lo asignamos a 
la variable archivos yluego seleccionamos el primer archivo eon la linea var archivo=archivos [0]. 

IMPORTANTE: Para aprender mas acerca del atributo multiple lea nuevamente el Capftulo 6, Listado 6-17. 

Tambien puede encontrar un ejemplo de como trabajar eon multiples archivos en el código del Listado 8-10, 

Capitulo 8. 

Lo primero que debemos hacer para comenzar a procesar el archivo es obtener un objęto FileReader 






usando el constructor FileReader (). En la función procesar () del Listado 12-3 llamamos a este objęto 
lector. En el siguiente paso, registramos un manejador de eventos onload para el objęto lector eon el objetivo 
de detectar cuando el archivo fue cargado y ya podemos comenzar a procesarlo. Finalmente, el metodo 
readAsText () lee el archivo yretorna su contenido en formato texto. 

Cuando el metodo readAsText() finaliza la lectura del archivo, el evento load es disparado y la función 
mostrar() es llamada. Esta función toma el contenido del archivo desde la propiedad result del objęto lector 
ylo muestra en pantalla. 

Este código, por supuesto, espera recibir archivos de texto, pero el metodo readAsText() toma lo que le 
enviamos y lo interpreta como texto, incluyendo archivos eon contenido binario (por ejemplo, imagenes). Si carga 
archivos eon diferente contenido, vera caracteres extrańos apareceren pantalla. 

Hagalo usted mismo: Cree archivos eon los códigos de los Listados 12-1, 12-2 y 12-3. Los nombres para 
los archivos CSS y Javascript fueron declarados en el documento HTML como file.css yfile.js 
respectivamente. Abra la plantilla en el navegador y use el formulario para seleccionar un archivo en su 
ordenador. Intente eon archivos de texto asi como imagenes para ver como los metodos utilizados 
presentan el contenido en pantalla. 

IMPORTANTE: En este momento, API File y cada una de sus especificaciones estan siendo implementadas 
por los fabricantes de navegadores. Los códigos en esta capitulo fueron testeados en Google Chrome y 
Firefox 4+, pero las ultimas versiones de Chrome no habian implementado aun el metodo 
addEventListener () para FileReader y otros objetos. Por esta razón, usamos manejadores de eventos 
en nuestro ejemplo, como onload, cada vezque era necesario para que el código trabajara correctamente. 
Por ejemplo, lector.onload=mostrar fue usado en lugar de lector.addEventListener('load', 
mostrar, false) . Como siempre, le recomendamos probar los códigos en cada navegador disponible 
para encontrar que implementación trabaja correctamente eon esta API. 


Propiedades de archivos 


En una aplicación real, información como el nombre del archivo, su tamańo o tipo sera necesaria para informar al 
usuario sobre los archivos que estan siendo procesados o incluso controlar cuales son o no son admitidos. El 
objęto enviado por el elemento <input> incluye varias propiedades para acceder a esta información: 

name Esta propiedad retorna el nombre completo del archivo (nombre yextensión). 

size Esta propiedad retorna el tamańo del archivo en bytes. 

type Esta propiedad retorna el tipo de archivo, especificado en tipos MIME. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 
var archivos=document.getElementByld('archivos'); 
archivos.addEventListener('change', procesar, false); 

} 

function procesar (e){ 

var archivos=e.target.fileś; 
caj adatos.innerHTML=''; 
var archivo=archivos[0]; 
if(!archivo.type.match(/image.*/i)){ 
alert('seleccione una imagen'); 

}else{ 

cajadatos.innerHTML+='Nombre: '+archivo.name+'<br>'; 

cajadatos.innerHTML+='Tamańo: '+archivo.size+' bytes<br>'; 

var lector=new FileReader(); 
lector.onload=mostrar; 
lector.readAsDataURL(archivo); 


function mostrar(e){ 

var resultado=e.target.result; 

caj adatos.innerHTML+='<img src="'fresultadof'; 

} 

window.addEventListener('load', iniciar, false); 



Listado 12-4. Cargando imigenes. 


El ejemplo del Listado 12-4 es similar al anterior excepto que esta vez usamos el metodo readAsDataURL () 
para leer el archivo. Este metodo retorna el contenido del archivo en el fermato data:url que puede ser usado 
luego como fuente de un elemento <img> para mostrar la imagen seleccionada en la pantalla. 

Cuando necesitamos procesar una clase particular de archivo, lo primero que debemos hacer es leer la 
propiedad type del archivo. En la función procesar () del Listado 12-4 controlamos este valor aprovechando el 
viejo metodo match (). Si el archivo no es una imagen, mostramos un mensaje de error eon alert (). Si, por otro 
lado, el archivo es efectivamente una imagen, el nombre y tamano del archivo son mostrados en pantalla y el 
archivo es abierto. 

A pesar del uso de readAsDataURL (), el proceso de apertura es exactamente el mismo. El objęto 
FileReader es creado, el manejador onload es registrado y el archivo es cargado. Una vez que el proceso 
termina, la función mostrar () usa el contenido de la propiedad result como fuente del elemento <img> y la 
imagen seleccionada es mostrada en la pantalla. 

Conceptos basicos: Para construir el filtro aprovechamos Expresiones Regulares y el conocido metodo 
Javascriptmatch (). Este metodo busca por cadenas de texto que concuerden eon la expresión regular, 
retornando un array eon todas las coincidencias o el valornull en caso de no encontrar ninguna. El tipo 
MIME para imagenes es algo como image/jpeg para imagenes en fermato JPG, o image/gif para 
imagenes en fermato GIF, por lo que la expresión /image. */i aceptara cualquier fermato de imagen, pero 
solo permitira que imagenes y no otro tipo de archivos sean lefdos. Para mas información sobre 
Expresiones Regulares o tipos MIME, N/isite nuestro sitio web ysiga los enlaces correspondientes a este 
capitulo. 


Blobs 


Ademas de archivos, la API trabaja eon otrą clase de fuente de datos llamada blobs. Un blob es un objęto 
representando datos en crudo. Fueron creados eon el propósito de superar limitaciones de Javascript para 
trabajar eon datos binarios. Un blob es normalmente generado a partir de un archivo, pero no necesariamente. Es 
una buena alternativa para trabajar eon datos sin cargar archivos enteros en memoria, y provee la posibilidad de 
procesar información binaria en pequeńas piezas. 

Un blob tiene propósitos multiples, pero esta enfocado en ofrecer una mejor manera de procesar grandes 
piezas de datos crudos o archivos. Para generar blobs desde otros blobs o archivos, la API ofrece el metodo 
slice (): 

slicefcomienzo, largo, tipo) Este metodo retorna un nuevo blob generado desde otro blob o un archivo. El 
primer atributo indica el punto de comienzo, el segundo el largo del nuevo blob, y el ultimo es un atributo 
opcional para especificar el tipo de datos usados. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 
var archivos=document.getElementByld('archivos'); 
archivos.addEventListener('change', procesar, false); 

} 

function procesar (e){ 

var archivos=e.target.fileś; 
caj adatos.innerHTML=''; 
var archivo=archivos[0]; 
var lector=new FileReader(); 

lector.onload=function(e){ mostrar(e, archivo); }; 

var blob=archivo.slice(0,1000); 

lector.readAsBinaryString(blob); 

} 

function mostrar(e, archivo){ 
var resultado=e.target.result; 

caj adatos.innerHTML='Nombre: '+archivo.name+'<br>'; 
caj adatos.innerHTML+='Tipo: '+archivo.type+'<br>'; 
cajadatos.innerHTML+='Tamano: '+archivo.size+' bytes<br>'; 
cajadatos.innerHTML+='Tamano Blob: 'tresultado.lengtht' 

bytes<br>'; 

caj adatos.innerHTML+='Blob: 'tresultado; 


window.addEventListener('load', iniciar, false); 


Listado 12-5. Trabajando eon blobs. 

IMPORTANTE: Debido a inconsistencias eon metodos previos, un reemplazo para el metodo slice esta 
siendo implementado en este momento. Hasta que este metodo este disponible, para probarel código del 
Listado 12-5 en las ultimas versiones de Firefox y Google Chrome tendra que reemplazar slice por 
mozSlice y webkitsiice respectivamente. Para mas información, visite nuestro sitio web y siga los 
enlaces correspondientes a este capitulo. 

En el código del Listado 12-5, hicimos exactamente lo que vemamos haciendo hasta el momento, pero esta 
vez en lugar de leer el archivo completo creamos un blob eon el metodo slice (). El blob tiene 1000 bytes de 
largo ycomienza desde el byte 0 del archivo. Si el archivo cargado es mas pequeńo que 1000 bytes, el blob sera 
del mismo largo del archivo (desde el comienzo hasta el EOF, o End Of File). 

Para mostrar la información obtenida por este proceso, registramos el manejador de eventos onload y 
llamamos a la función mostrar () desde una función anonima eon la que pasamos la referenda del objęto 
archivo. Este objęto es recibido por mostrar () ysus propiedades son mostradas en la pantalla. 

Las ventajas ofrecidas por blobs son incontables. Podemos crear un bucie para dividir un archivo en varios 
blobs, por ejemplo, y luego procesar esta información parte por parte, creando programas para subir archivos al 
servidor o aplicaciones para procesar imagenes, entre otras. Los blobs ofrecen nuevas posibilidades a los 
códigos Javascript. 


Eventos 


El tiempo que toma a un archivo para ser cargado en memoria depende de su tamańo. Para archivos pequeńos, 
el proceso se asemeja a una operación instantanea, pero grandes archivos pueden tomar varios segundos en 
cargar. Ademas del evento load ya estudiado, la API provee eventos especiales para informar sobre cada 
instancia del proceso: 

loadstart Este evento es disparado desde el objęto FileReader cuando la carga comienza. 
progress Este evento es disparado periódicamente mientras el archivo o blob esta siendo leldo. 
abort Este evento es disparado si el proceso es abortado. 
error Este evento es disparado cuando la carga ha fallado. 

loadend Este evento es similar a load, pero es disparado en caso de exito o fracaso. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 
var archivos=document.getElementByld('archivos'); 
archivos.addEventListener('change', procesar, false); 

} 

function procesar (e){ 

var archivos=e.target.files; 
caj adatos.innerHTML=''; 
var archivo=archivos[0]; 
var lector=new FileReader(); 
lector.onloadstart=comenzar; 
lector.onprogress=estado; 

lector.onloadend=function(){ mostrar(archivo); }; 

lector.readAsBinaryString(archivo); 

} 

function comenzar(e){ 

cajadatos.innerHTML='<progress value="0" max="100">0%</progress>'; 

} 

function estado(e){ 

var por=parseInt(e.loaded/e.total*100); 

cajadatos.innerHTML='<progress value="'+por+'" max="100">' 

+por+'%</progress>'; 


function mostrar(archivo){ 

caj adatos.innerHTML='Nombre: '+archivo.name+'<br>'; 




caj adatos.innerHTML+='Tipo: '+archivo.type+'<br>'; 

cajadatos.innerHTML+='Tamano: '+archivo.size+' bytes<br>'; 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-6. Usando eventos para controlarel proceso de lectura. 

Con el código del Listado 12-6 creamos una aplicación que carga un archivo y muestra el progreso de la 
operación a traves de una barra de progreso. Tres manejadores de eventos fueron registrados en el objęto 
FileReader para controlarel proceso de lectura ydos funciones fueron creadas para respondera estos eventos: 
comenzar() yestado(). La función comenzar() iniciara la barra de progreso con el valor 0% y la mostrara en 
pantalla. Esta barra de progreso podria usar cualquier valor o rango, pero decidimos usar porcentajes para que 
sea mas comprensible para el usuario. En la función estado (), este porcentaje es calculado a partir de las 
propiedades loadedytotal retornadas porel evento progress. La barra de progreso es recreada en la pantalla 
cada vezque el evento progress es disparado. 

Hagalo usted mismo: Usando la plantilla del Listado 12-1 y el código Javascript del Listado 12-6, pruebe 
cargar un archivo extenso (puede intentar con un video, por ejemplo) para ver la barra de progreso en 
funcionamiento. Si el navegador no reconoce el elemento <progress>, el contenido de este elemento es 
mostrado en su lugar. 

IMPORTANTE: En nuestro ejemplo utilizamos innerHTML para agregar un nuevo elemento <progress> al 
documento. Esta no es una practica recomendada pero es util y conveniente por razones didacticas. 
Normalmente los elementos son agregados al documento usando el metodo Javascript createElement () 
junto con appendChild (). 



12.3 Creando archivos 


La parte principal deAPI File es util para cargar y procesar archivos ubicados en el ordenador del usuario, pero 
toma archivos que ya existen en el disco duro. No contempla la posibilidad de crear nuevos archivos o directorios. 
Una extensión de esta API llamada API File: Directories & System se hace cargo de esta situación. La API reserva 
un espacio especffico en el disco duro, un espacio de almacenamiento especial en el cual la aplicación web 
podrą crearyprocesararchivos ydirectorios exactamente como una aplicación de escritorio lo haria. El espacio es 
unico y solo accesible por la aplicación que lo creó. 

IMPORTANTE: Al momento de escribir estas llneas Google Chrome es el unico navegador que ha 
implementado esta extensión de API File, pero no reserva espacio de almacenamiento por defecto. Si 
intentamos ejecutar los siguientes códigos un error QUOTA_EXCEEDED (cupo excedido) sera mostrado. 
Para poder usar API File: Directories & System, Chrome debe ser abierto eon la siguiente bandera: — 
unlimited-quota-for-files. Para incorporar esta bandera en Windows, vaya a su escritorio, haga clic 
eon el botón derecho del ratón sobre el leono de Google Chrome y seleccione la opción Propiedades. 
Dentro de la ventana abierta vera un campo llamado Destino eon la ruta y el nombre del archivo del 
programa. Al finał de esta llnea agregue la bandera — unlimited-quota-for-files. La ruta obtenida 
sera similara la siguiente: 

C:\Usuarios\... \Chrome\Application\chrome.exe --unlimited-quota-for-files 


Plantilla 


Para probar esta parte de la API vamos a necesitar un nuevo formulario eon un campo de texto y un botón para 
crear yprocesar archivos ydirectorios: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>File API</title> 

<link rel="stylesheet" href="file.css"> 

<script src="file. js"x/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Nombre:<brxinput type="text" name="entrada" 

id="entrada" requiredx/p> 
<pxinput type="button" name="boton" id="boton" 

value="Aceptar"x/p> 

</form> 

</section> 

<section id="cajadatos"> 

No hay entradas disponibles 
</section> 

</body> 

</html> 


Listado 12-7. Nueva plantilla para File API: Directories & System. 

Hagalo Usted Mismo: El documento HTML genera un nuevo formulario pero preserva la misma estructura y 
estilos CSS. Solo necesita reemplazarel código HTML anterior por el del Listado 12-7 ycopiarlos códigos 
Javascript dentro del archivo file. js para probar los siguientes ejemplos. 

IMPORTANTE: El atributo request fue incluido en el elemento <input>, pero no sera considerado en los 
códigos de este capltulo. Para volver efectivo el proceso de validación, deberemos aplicarAPI Forms. Lea el 
código del Listado 10-5, Capltulo 10, para encontrar un ejemplo sobre como hacerlo. 


El disco duro 







El espacio reservado para la aplicación es como un espacio aislado, una pequeńa unidad de disco duro eon su 
propio directorio raiz y configuración. Para comenzar a trabajar eon esta unidad virtual, primero tenemos que 
solicitar que un Sistema de Archivos sea inicializado para nuestra aplicación. 

requestFileSystem(tipo, łamano, función exito, función error) Este metodo crea el Sistema de Archivos del 
tamańo y tipo especificados por sus atributos. El valor del atributo tipo puede serTEMPORARY 
(temporario) o persistent (persistente) de aeuerdo al tiempo que deseamos que los archivos sean 
preservados. El atributo tamańo determina el espacio total que sera reservado en el disco duro para este 
Sistema de Archivos en bytes. En caso de error o exito, el metodo Marna a las correspondientes 
funciones. 

El metodo requestFileSystem() retorna un objęto FileSystem eon dos propiedades: 

root El valorde esta propiedad es una referenda al directorio raizdel Sistema deArchivos. Este es tambien 
un objęto DirectoryEntry (Entrada de Directorio) y tiene los metodos asignados a esta clase de 
objetos, como veremos mas adelante. Usando esta propiedad podemos referenciar el espacio de 
almacenamiento y por medio de esta referenda trabajar eon archivos y directorios. 

name Esta propiedad retorna información acerca del Sistema deArchivos, como el nombre asignado por el 
navegadorysu condición. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 
var boton=document.getElementByld('boton'); 
boton.addEventListener('click', crear, false); 

window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024, 

creardd, errores); 


function creardd(sistema) { 
dd=sistema.root; 

} 

function crear (){ 

var nombre=document.getElementByld('entrada').value; 
if(nombre!=''){ 

dd.getFile(nombre, {create: true, exclusive: false}, mostrar, 

errores); 


function mostrar(entrada){ 

document.getElementByld('entrada').value=''; 

caj adatos.innerHTML='Entrada Creada!<br>'; 
caj adatos.innerHTML+='Nombre: '+entrada.name+'<br>'; 
caj adatos.innerHTML+='Ruta: '+entrada.fullPath+'<br>'; 

caj adatos.innerHTML+='Sistema: '+entrada.filesystem.name; 

} 

function errores (e){ 

alert('Error: 'le.code); 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-8. Creando nuestro propio Sistema de Archivos. 

IMPORTANTE: Google Chrome es el unico navegador en este momento eon una implementación funcional 
de esta parte de File API. Debido a que la implementación es experimental, tuvimos que reemplazar el 
metodo requestFileSystem() por el especifico de Chrome webkitRequestFileSystem() . Usando este 
metodo, podrą probar en su navegador los códigos para este y los siguientes ejemplos. Una vez que la 
etapa de experimentación este finalizada podrą volver a usar el metodo original. 

Usando el documento FITML del Listado 12-7 y el código del Listado 12-8, obtenemos nuestra primera 
aplicación para trabajar eon nuevos archivos en el ordenador del usuario. El código Mama al metodo 
reąuestFileSystem () para crear el Sistema de Archivos (u obtener una referenda si el sistema ya existe), y si 
esta es la primera visita, el Sistema de Archivos es creado como permanente, eon un tamańo de 5 megabytes 
(5*1024*1024). En caso de que esta ultima operación sea un exito, la función creardd () es ejecutada, 
continuando eon el proceso de inicialización. Para controlar errores, usamos la función errores (), del mismo 
modo que lo hicimos para otras APls. 








Cuando el Sistema de Archivos es creado o abierto, la función creardd() recibe un objęto FileSystem y 
graba el valorde la propiedad rooten la variable ddpara referenciar el directorio raizmas adelante. 


Creando archivos 


El proceso de iniciación del Sistema de Archivos ha sido finalizado. El resto de las funciones en el código del 
□stado 12-8 crean un nuevo archivo y muestran los datos de la entrada (un archivo o directorio) en la pantalla. 
Cuando el botón “Aceptar” es presionado en el formulario, la función crear() es llamada. Esta función asigna el 
texto insertado en el elemento <input> a la variable nombre y crea un archivo eon ese nombre usando el metodo 
getFile (). 

Este ultimo metodo es parte de la interface DirectoryEntry incluida en la API. La interface provee un total de 
cuatro metodos para crearymanejararchivos ydirectorios: 

getFile(ruta, opciones, función exito, función error) Este metodo crea o abre un archivo. El atributo ruta 
debe incluir el nombre del archivo y la ruta donde el archivo esta localizado (desde la raiz de nuestro 
Sistema deArchivos). Haydos banderas que podemos usar para configurarel comportamiento de este 
metodo: create yexclusive. Ambas reciben valores booleanos. La bandera create (crear) indica si el 
archivo sera creado o no (en caso de que no exista, por supuesto), y la bandera exclusive (exclusivo), 
cuando es declarada como true (verdadero), fuerza al metodo getFile () a retornar un error si 
intentamos crear un archivo que ya existe. Este metodo tambien recibe dos funciones para responder en 
case de exito o error. 

getDirectory(ruta, opciones, función exito, función error) Este metodo tiene exactamente las mis mas 

caracteristicas que el anterior pero es exclusivo para directorios (carpetas). 

createReader() Este metodo retorna un objęto DirectoryReader para leer entradas desde un directorio 
especifico. 

removeRecursively() Este es un metodo especifico para eliminar directorios ytodo su contenido. 

En el código del Listado 12-8, el metodo getFile () usa el valor de la variable nombre para crear u obtener el 
archivo. El archivo sera creado si no existe (create: true) o sera leido en caso contrario (exclusive: false). 
La función crear () tambien controla que el valor de la variable nombre no sea una cadena vacla antes de 
ejecutar getFile (). 

El metodo getFile () usa dos funciones, mostrar () yerrores (), para responder al exito o fracaso de la 
operación. La función mostrar () recibe un objęto Entry (entrada) y muestra el valor de sus propiedades en la 
pantalla. Este tipo de objetos tiene varios metodos y propiedades asociadas que estudiaremos mas adelante. Por 
ahora hemos aprovechado solo las propiedades name, fullPath y filesystem. 


Creando directorios 


El metodo getFile () (especifico para archivos) y el metodo getDirectory () (especifico para directorios) son 
exactamente iguales. Para crear un directorio (carpeta) en nuestro Sistema de Archivos del ejemplo anterior, solo 
tenemos que reemplazar el nombre getFile () por getDirectory (), como es mostrado en el siguiente código: 


function crear(){ 

var nombre=document.getElementByld('entrada').value; 
if (nombre! = ''){ 

dd.getDirectory(nombre, {create: true, exclusive: false}, 

mostrar, errores); 



Listado 12-9. Usando getDirectory o para crear un directorio. 

Ambos metodos son parte del objęto DirectoryEntry llamado root, que estamos representando eon la 
variable dd, por lo que siempre deberemos usar esta variable para llamar a los metodos y crear archivos y 
directorios en el Sistema de Archivos de nuestra aplicación. 

Hagalo usted mismo: Use la función en el Listado 12-9 para reemplazar la función crear () del Listado 12- 
8 y asi crear directorios en lugar de archivos. Suba los archivos a su servidor, abra el documento HTML del 



Listado 12-7 en su navegador ycree un directorio usando el formulario en la pantalla. 


Listando archivos 


Como mencionamos antes, el metodo createReader () nos permite acceder a una lista de entradas (archivos y 
directorios) en una ruta especifica. Este metodo retorna un objęto DirectoryReader que contiene el metodo 
readEntries () para leer las entradas obtenidas: 

readEntriesffunción exito, función error) Este metodo lee el siguiente bloque de entradas desde el 
directorio seleccionado. Cada vez que el metodo es llamado, la función utilizada para procesar 
operaciones exitosas retorna un objęto eon la lista de entradas o el valornull si no se encontró 
ninguna. 

El metodo readEntries () lee la lista de entradas por bloque. Como consecuencia, no existe garantia alguna 
de que todas las entradas seran retornadas en una sola llamada. Tendremos que llamar al metodo tantas veces 
como sea necesario hasta que el objęto retornado sea un objęto vacio. 

Ademas, deberemos hacer otrą consideración antes de escribir nuestro próximo código. El metodo 
createReader () retorna un objęto DirectoryReader para un directorio especifico. Para obtener los archivos 
que queremos, primero tenemos que obtener el correspondiente objęto Entry del directorio que queremos leer 
usando el ya conocido metodo getDirectory (): 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 
var boton=document.getElementByld('boton'); 
boton.addEventListener('click', crear, false); 

window.webkitReąuestFileSystem(window.PERSISTENT, 5*1024*1024, 

creardd, errores); 


function creardd(sistema) { 
dd=sistema.root; 
ruta=''; 
mostrar (); 

} 

function errores (e){ 

alert('Error: ’+e.code); 

} 

function crear (){ 

var nombre=document.getElementByld('entrada').value; 
if(nombre!=''){ 

nombre=ruta+nombre; 

dd.getFile(nombre, {create: true, exclusive: false}, mostrar, 

errores); 


function mostrar (){ 

document.getElementByld('entrada').value=''; 
caj adatos.innerHTML=''; 

dd.getDirectory(ruta,nuli,leerdir,errores); 

} 

function leerdir(dir){ 

var lector=dir.createReader(); 
var leer=function (){ 

lector.readEntries(function(archivos){ 
if(archivos.length){ 
listar(archivos); 
leer (); 

} 

}, errores); 

} 


leer (); 


function listar(archivos){ 

for(var i=0; i<archivos.length; i++) { 

if(archivos[i].isFile) { 

caj adatos.innerHTML+=archivos[i] .name+'<br>'; 

}else if(archivos[i].isDirectory){ 
caj adatos.innerHTML+='<span onclick= 

"cambiardir(\''+archivos[i].name+'\" 
class="directorio">+'+archivos[i].name+'</span><br>'; 


function cambiardir(nuevaruta){ 
ruta=ruta+nuevaruta+'/'; 
mostrar (); 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-10. Sistema de Archivos completo. 

Este código no reemplazara al Explorador de Archivos de Windows, pero al menos provee toda la información 
que necesitamos para entender como construir un Sistema de Archivos util y funcional para la web. Vamos a 
analizarlo parte por parte. 

La función iniciar () hace lo mismo que en códigos previos: inicia o crea el Sistema de Archivos y llama a la 
función creardd () si tiene exito. Ademas de declarar la variable dd para referenciar el directorio raiz de nuestro 
disco duro virtual, la función creardd () tambien inicializa la variable ruta eon una cadena de texto vacia 
(representando el directorio raiz) y llama a la función mostrar () para mostrar la lista de entradas en pantalla tan 
pronto como la aplicación es cargada. 

La variable ruta sera usada en el resto de la aplicación para conservar el valor de la ruta actual dentro de 
Sistema de Archivos en la que el usuario esta trabajando. Para entender su importancia, puede ver como la 
función crear () fue modificada en el código del Listado 12-10 para usar este valor y as i crear nuevos archivos en 
la ruta correspondiente (dentro del directorio seleccionado por el usuario). Ahora, cada vezque un nuevo nombre 
de archivo es enviado desde el formulario, la ruta es agregada al nombre y el archivo es creado en el directorio 
actual. 

Como ya explicamos, para mostrar la lista de entradas, debemos primero abrir el directorio a ser leido. 
Usando el metodo getDirectory () en la función mostrar (), el directorio actual (de aeuerdo a la variable ruta) 
es abierto y una referenda a este directorio es enviada a la función leerdir () si la operación es exitosa. Esta 
función guarda la referenda en la variable dir, crea un nuevo objęto DirectoryReader para el directorio actual y 
obtiene la lista de entradas eon el metodo readEntries () . 

En leerdir () , funciones anónimas son usadas para mantener el código organizado y no superpoblar el 
entorno global. En primer lugar, createReader () crea un objęto DirectoryReader para el directorio 
representado por dir. Luego, una nueva función llamada leer () es creada dinamicamente para leer las 
entradas usando el metodo readEntries (). Este metodo lee las entradas por bloque, lo que significa que 
debemos llamarlo varias veces para asegurarnos de que todas las entradas disponibles en el directorio son 
leidas. La función leer() nos ayuda a lograr este propósito. El proceso es el siguiente: al finał de la función 
leerdir(), la función leer () es llamada por primera vez. Dentro de la función leer () llamamos al metodo 
readEntries () . Este metodo usa otrą función anonima en caso de exito para recibir el objęto files y procesar 
su contenido (archivos). Si este objęto no esta vaclo, la función listar () es llamada para mostrar en pantalla 
las entradas leidas, y la función leer() es ejecutada nuevamente para obtener el siguiente bloque de entradas 
(la función se llama a si misma una yotra vezhasta que ninguna entrada es retornada). 

La función listar () esta a cargo de imprimir la lista de entradas (archivos y directorios) en pantalla. Toma el 
objęto files y comprueba las caracteristicas de cada entrada usando dos propiedades importantes de la 
interface Entry: isFile e isDirectory. Como sus nombres en ingles indican, estas propiedades contienen 
valores booleanos para informar si la entrada es un archivo o un directorio. Luego de que esta condición es 
controlada, la propiedad name es usada para mostrar información en la pantalla. 

Existe una diferencia en como nuestra aplicación mostrara un archivo o un directorio en la pantalla. Cuando 
una entrada es detectada como directorio, es mostrada a traves de un elemento <span> eon un manejador de 
eventos onclick que llamara a la función cambiardir () si el usuario hace clic sobre el mismo. El propósito de 
esta función es declarar la nueva ruta actual para apuntar al directorio seleccionado. Recibe el nombre del 
directorio, agrega el directorio al valor de la variable ruta y llama a la función mostrar () para actualizar la 
información en pantalla (ahora deberian verse las entradas dentro del nuevo directorio seleccionado). Esta 
caracteristica nos permite abrir directorios y ver su contenido eon solo un clic del ratón, exactamente como una 



exploradorde archivos comun ycorriente haria. 

Este ejemplo no contempla la posibilidad de retroceder en la estructura para ver el contenido de directorios 
padres. Para hacerlo, debemos aprovechar otro metodo provisto por la interface Entry: 

getParentffunción exito, función error) Este metodo retorna un objęto Entry del directorio que contiene la 
entrada seleccionada. Una vez que obtenemos el objęto Entry podemos leer sus propiedades para 
obtenertoda la información acerca del directorio padre de esa entrada en particular. 

Como trabajar eon el metodo getParent() es simple: supongamos que una estructura de directorios como 
fotos/misvacaciones fue creada yel usuario esta listando el contenido de misvacaciones en este momento. 
Para regresar al directorio fotos, podriamos incluir un enlace en el documento HTML eon un manejador de 
eventos onclick que Marne a la función encargada de modificar la ruta actual para apuntar a esta nueva dirección 
(el directorio fotos). La función llamada al hacer clic sobre el enlace podria ser similar a la siguiente: 


function volver(){ 

dd.getDirectory(ruta,nuli,function(dir){ 
dir.getParent(function(padre){ 
ruta=padre.fullPath; 
mostrar (); 

}, errores); 

},errores); 

} 


Listado 12-11. Regresando al directorio padre. 

La función volver () en el Listado 12-11 cambia el valor de la variable ruta para apuntar al directorio padre 
del directorio actual. Lo primero que hacemos es obtener una referenda del directorio actual usando el metodo 
getDirectory (). Si la operación es exitosa, una función anonima es ejecutada. En esta función, el metodo 
getParent () es usado para encontrarel directorio padre del directorio referenciado por dir (el directorio actual). 
Si esta operación es exitosa, otrą función anonima es ejecutada para recibir el objęto padre y declarar el valor de 
I a ruta actual igual al valor de la propiedad fullPath (esta propiedad contiene la ruta completa hacia el 
directorio padre). La función mostrar () es llamada al finał del proceso para actualizar la información en pantalla 
(mostrar las entradas ubicadas en la nueva ruta). 

Por supuesto, esta aplicación puede ser extremadamente enriquecida y mejorada, pero eso es algo que 
dejamos en sus manos. 

Hagalo Usted Mismo: Agregue la función del Listado 12-11 al código del Listado 12-10 ycree un enlace en 
el documento HTML para llamar a esta función (por ejemplo, <span 
onclick="volver()">volver</span>). 


Manejando archivos 


Ya mencionamos que la interface Entry incluye un grupo de propiedades y metodos para obtener información y 
operar archivos. Muchas de las propiedades disponibles ya fueron usadas en previos ejemplos. Ya 
aprovechamos las propiedades isFile e isDirectory para comprobar la clase de entrada, ytambien usamos 
los valores de name, fullPath yfilesystem para mostrar información sobre la entrada en pantalla. El metodo 
getParent (), estudiado en el ultimo código, es tambien parte de esta interface. Sin embargo, existen todavia 
algunos metodos mas que son utiles para realizar operaciones comunes sobre archivos y directorios. Usando 
estos metodos podremos mover, copiar y eliminar entradas exactamente como en cualquier aplicación de 
escritorio: 

moveTo(directorio, nombre, función exito, función error) Este metodo mueve una entrada a una ubicación 
diferente en el Sistema de Archivos. Si el atributo nombre es provisto, el nombre de la entrada sera 
cambiado a este valor. 

copyTo(directorio, nombre, función exito, función error) Este metodo genera una copia de una entrada en 
otrą ubicación dentro del Sistema de Archivos. Si el atributo nombre es provisto, el nombre de la nueva 
entrada sera cambiado a este valor. 

remove() Este metodo elimina un archivo o un directorio vacio (para eliminar un directorio eon contenido, 
debemos usarel metodo removeRecursively () presentado anteriormente). 

Necesitaremos una nueva plantilla para probar estos metodos. Para simplificar los códigos, vamos a crear un 





formulario eon solo dos campos, uno para el origen yotro para el destino de cada operación: 


<!DOCTYPE html> 

Chtml lang="es"> 

<head> 

<title>File API</title> 

clink rel="stylesheet" href="file.css"> 

<script src="file . j s"X/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Origen:<brxinput type="text" name="origen" id="origen" 

requiredx/p> 

<p>Destino:<brxinput type="text" name="destino" 

id="destino" requiredx/p> 
<pxinput type="button" name="boton" id="boton" 

value="Aceptar"x/p> 

</form> 

</section> 

<section id="cajadatos"x/section> 

</body> 

</html> 


Listado 12-12: nueva plantilla para operarcon archivos 


Moviendo 


El metodo moveTo () requiere un objęto Entry para el archivo yotro para el directorio en donde el archivo sera 
movido. Por lo tanto, primero tenemos que crear una referenda al archivo que vamos a mover usando getFile (), 
luego obtenemos la referenda del directorio destino eon getDirectory (), yfinalmente aplicamos moveTo () eon 
esta información: 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 

var boton=document.getElementByld('boton'); 

boton.addEventListener('click', modificar, false); 

window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024, 

creardd, errores); 


function creardd(sistema){ 
dd=sistema.root; 
ruta=''; 
mostrar (); 

} 

function errores(e){ 

alert('Error: 'le.code); 

} 

function modificar(){ 

var origen=document.getElementByld('origen').value; 
var destino=document.getElementByld('destino').value; 

dd.getFile(origen,nuli,function(archivo){ 
dd.getDirectory(destino,nuli,function(dir){ 

archivo.moveTo(dir,nuli,exito,errores); 

},errores); 

},errores); 

} 

function exito(){ 

document.getElementByld('origen'),value=' 
document.getElementByld('destino').value=' 






mostrar (); 


} 

function mostrar(){ 

caj adatos.innerHTML=''; 

dd.getDirectory(ruta,nuli,leerdir,errores); 

} 

function leerdir(dir){ 

var lector=dir.createReader(); 
var leer=function () { 

lector.readEntries(function(archivos){ 
if(archivos.length){ 
listar(archivos); 
leer (); 

} 

}, errores); 


leer (); 

} 

function listar(archivos){ 

for(var i=0; i<archivos.length; i++) { 

if(archivos[i].isFile) { 

caj adatos.innerHTML+=archivos[i] .name+'<br>'; 

}else if(archivos[i].isDirectory){ 
caj adatos.innerHTML+='<span onclick= 

"cambiardir(\''+archivos[i].name+'\" 
class="directorio">+'+archivos[i].name+'</span><br>'; 


function cambiardir(nuevaruta){ 
ruta=ruta+nuevaruta+'/'; 
mostrar (); 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-13. Moviendo archivos. 

En este ultimo ejemplo, usamos funciones de códigos previos para crear o abrir nuestro Sistema de Archivos y 
mostrar el listado de entradas en pantalla. La unica función nueva en el Listado 12-13 es modificar (). Esta 
función toma los valores de los campos del formulario origen y destino y los utiliza para abrir el archivo original 
y luego, si la operación es exitosa, abrir el directorio de destino. Si ambas operaciones son exitosas el metodo 
moveTo() es aplicado sobre el objęto file y el archivo es movido al directorio representado por dir. Si esta 
ultima operación es exitosa, la función exito() es llamada para vaciar los campos en el formulario y actualizar 
las entradas en pantalla ejecutando la función mostrar (). 

Hagalo usted mismo: Para probar este ejemplo necesita un archivo HTML eon la plantilla del Listado 12-12, 
el archivo CSS usado desde el comienzo de este capltulo, y un archivo llamado file. js eon el código del 
Listado 12-13 (reeuerde subir los archivos a su servidor). Cree archivos y directorios usando códigos 
previos para tener entradas eon las que trabajar. Utilice el formulario del ultimo documento HTML para 
insertar los valores del archivo a ser movido (eon la ruta completa desde la raiz) y el directorio en el cual el 
archivo sera movido (si el directorio se eneuentra en la raizdel Sistema de Archivos no necesita usar barras, 
solo su nombre). 


Copiando 


Porsupuesto, la unica diferencia entre el metodo moveTo () y el metodo copyTo () es que el ultimo preserva el 
archivo original. Para usar el metodo copyTo (), solo debemos cambiar el nombre del metodo en el código del 
Listado 12-13. La función modificar () guedara como en el siguiente ejemplo: 


function modificar(){ 

var origen=document.getElementByld('origen').value; 
var destino=document.getElementByld('destino').value; 




dd.getFile(origen,nuli,function(archivo){ 
dd.getDirectory(destino,nuli,function(dir){ 

archivo.copyTo(dir,null,exito,errores); 

}, errores) ; 

},errores); 


Listado 12-14. Copiando archivos. 

Hagalo usted mismo: Reemplace la función modificar () del Listado 12-13 eon esta ultima y abra la 
plantilla del Listado 12-12 para probar el código. Para copiar un archivo, debe repetir los pasos usados 
previamente para moverlo. Inserte la ruta del archivo a copiar en el campo origen y la ruta del directorio 
donde desea generar la copia en el campo destino. 


Eliminando 


Eliminar archivos y directorio es incluso mas sencillo que mover y copiar. Todo lo que tenemos que hacer es 
obtener un objęto Entry del archivo o directorio que deseamos eliminar y aplicar el metodo remove() a esta 
referenda: 


function modificar(){ 

var origen=document.getElementByld('origen'),value; 
var origen=ruta+origen; 

dd.getFile(origen,nuli,function(entrada){ 

entrada.remove(exito,errores); 

},errores); 

} 


Listado 12-15. Eliminando archivos y directorios. 

El código del Listado 12-15 solo utiliza el valor del campo origen del formulario. Este valor, junto eon el valor 
de la variable ruta, representara la ruta completa de la entrada que queremos eliminar. Usando este valor y el 
metodo getFile () creamos un objęto Entry para la entrada y luego aplicamos el metodo remove (). 

Hagalo usted mismo: Reemplace la función modificar () en el código del Listado 12-13 eon la nueva del 
Listado 12-15. Esta vez solo necesita ingresar el valor del campo origen para especificar el archivo a ser 
eliminado. 

Para eliminar un directorio en lugar de un archivo, el objęto Entry debe ser creado para ese directorio usando 
getDirectory (), pero el metodo remove () trabaja exactamente igual sobre un tipo de entrada u otro. Sin 
embargo, debemos considerar una situación eon respecto a la eliminación de directorios: si el directorio no esta 
vacio, el metodo remove() retornara un error. Para eliminar un directorio y su contenido, todo al mismo tiempo, 
debemos usar otro metodo mencionado anteriormente llamado removeRecursively (): 


function modificar(){ 

var destino=document.getElementByld('destino').value; 
dd.getDirectory(destino,nuli,function(entrada){ 

entrada.removeRecursively(exito,errores); 

},errores); 

} 


Listado 12-16. Eliminando directorios no vacios. 

En la función del Listado 12-16 usamos el valor del campo destino para indicar el directorio a ser eliminado. 
El metodo removeRecursively () eliminara el directorio y su contenido en una sola ejecución y llamara a la 
función exito () si la operación es realizada eon exito. 

Hagalo usted mismo: Las funciones modificar () presentadas en los Listados 12-14,12-15 y 12-16 fueron 
construidas para reemplazarla misma función en el Listado 12-13. Para ejecutar estos ejemplos, utilice el 
código del Listado 12-13, reemplace la función modificar () por la que quiere probar yabra la plantilla del 
Listado 12-12 en su navegador. De aeuerdo al metodo elegido, debera ingresar uno o dos valores en el 









formulario. 


IMPORTANTE: Si tiene problemas para ejecutar estos ejemplos, le recomendamos usar la ultima versión 
disponible del navegador Chromium ( www.chromium.org ). Los códigos para esta parte de File API fueron 
tambien probados eon exito en Google Chrome. 



12.4 Contenido de archivos 


Ademas de la parte principal de API File y la extensión ya estudiada, existe otrą especificación IlamadaAPI File: 
Writer. Esta extensión declara nuevas interfaces para escribir y agregar contenido a archivos. Trabaja junto eon el 
resto de la API combinando metodos y compartiendo objetos para lograr su objetivo. 

IMPORTANTE: La integración entre todas las especificaciones involucradas en API despertó debate acerca 
de si algunas de las interfaces propuestas deberian ser movidas desde una API a otrą. Para obtener 
información actualizada a este respecto, visite nuestro sitio web o el sitio de W3C en www.w3.org. 


Escribiendo contenido 


Para escribir contenido dentro de un archivo necesitamos crear un objęto FileWriter. Estos objetos son 
retornados porel metodo createWriter () de la interface FileEntry. Esta interface fue adicionada a la interface 
Entry y provee un total de dos metodos para trabajar eon archivos: 

createWriterffunción exito, función error) Este metodo retorna un objęto FileWriter asociado eon la 
entrada seleccionada. 

fileffunción exito, función error) Este es un metodo que vamos a usar mas adelante para leer el contenido 
del archivo. Crea un objęto File asociado eon la entrada seleccionada (como el retornado por el 
elemento <input> o una operación arrastrar y soltar). 

El objęto FileWriter retornado porel metodo createWriter () tiene sus propios metodos, propiedades y 
eventos para facilitar el proceso de agregar contenido a un archivo: 

write(datos) Este es el metodo que escribe contenido dentro del archivo. El contenido a ser insertado es 
provisto por el atributo datos en forma de blob. 

seek(desplazamiento) Este metodo establece la posición del archivo en la cual el contenido sera escrito. El 
valordel atributo desplazamiento debe serdeclarado en bytes. 

truncate(tamano) Este metodo cambia el tamańo del archivo de aeuerdo al valor del atributo tamańo (en 
bytes). 

position Esta propiedad retorna la posición actual en la cual la siguiente escritura ocurrira. La posición sera 
0 para un nuevo archivo o diferente de 0 si algun contenido fue escrito dentro del archivo o el metodo 
seek() fue aplicado previamente. 

length Esta propiedad retorna el largo del archivo. 

writestart Este evento es disparado cuando el proceso de escritura comienza. 

progress Este evento es disparado periódicamente para informarel progreso. 

write Este evento es disparado cuando los datos han sido completamente escritos en el archivo. 

abort Este evento es disparado si el proceso es abortado. 

error Este evento es disparado si ocurre un error en el proceso. 

writeend Este evento es disparado cuando el proceso termina. 

Necesitamos crear un objęto mas para preparar el contenido a ser agregado al archivo. El constructor 
BlobBuilder () retorna un objęto BlobBuilder eon los siguientes metodos: 

getBlob(tipo) Este metodo retorna el contenido del objęto BlobBuilder como un blob. Es util para crear el 
blob que necesitamos usar eon el metodo write (). 

append(datos) Este metodo agrega el valor de datos al objęto BlobBuilder. El atributo datos puede ser 
un blob, un dato del tipo ArrayBuffer o simplemente texto. 

El documento FITML del Listado 12-17 incorpora un segundo campo para insertar texto que representara el 
contenido del archivo. Sera la plantilla utilizada en los próximos ejemplos: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>File API</title> 



<link rel="stylesheet" href="file.css"> 

<script src="file . j s"X/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Archivo:<br><input type="text" name="entrada" 

id="entrada" requiredx/p> 
<p>Texto:<brxtextarea name="texto" id="texto" 

requiredx/textareax/p> 
<pxinput type="button" name="boton" id="boton" 

value="Aceptar"x/p> 

</form> 

</section> 

<section id="cajadatos"> 

No hay información disponible 
</section> 

</body> 

</html> 


Listado 12-17. Formulario para ingresarel nombre del archivo y su contenido. 

Para la escritura del contenido abrimos el Sistema de Archivos, obtenemos o creamos el archivo eon 
getFile () e insertamos contenido en su interior eon los valores ingresados por el usuario. Con este fin, 
crearemos dos nuevas funciones: escribirarchivo () yescribircontenidoO . 

IMPORTANTE: Hemos intentado mantener los códigos lo mas simples posible por propósitos didacticos. 
Sin embargo, usted siempre puede aprovechar funciones anónimas para mantener todo dentro del mismo 
entorno (dentro de la misma función) o utilizar Programación Orientada a Objetos para implementaciones 
mas poderosas yescalables. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 

var boton=document.getElementByld('boton'); 

boton.addEventListener('click', escribirarchivo, false); 

window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024, 

creardd, errores); 


function creardd(sistema){ 
dd=sistema.root; 

} 

function errores (e){ 

alert('Error: 'le.code); 

} 

function escribirarchivo(){ 

var nombre=document.getElementByld('entrada').value; 
dd.getFile(nombre, {create: true, exclusive: 

false},function(entrada){ 

entrada.createWriter(escribircontenido, errores); 

}, errores); 

} 

function escribircontenido(fileWriter) { 

var texto=document.getElementByld('texto').value; 

fileWriter.onwriteend=exito; 

var blob=new WebKitBlobBuilder(); 

blob.append(texto); 

fileWriter.write(blob.getBlob()); 

} 

function exito(){ 

document.getElementByld('entrada').value=''; 
document.getElementByld('texto').value=' 
caj adatos.innerHTML='Hecho!'; 

} 

window.addEventListener('load', iniciar, false); 







Listado 12-18. Escribiendo contenido. 

IMPORTANTE: Del mismo modo que el metodo requestFileSystem() , Google Chrome ha agregado un 
prefijo al constructorBlobBuilder () en la implementación actual. Deberemos usar 
WebKitBlobBuilder () en esteylos siguientes ejemplos para probarnuestros códigos en este navegador. 
Como siempre, el metodo original podrą ser utilizado luego de que la etapa experimental sea finalizada. 

Cuando el botón “Aceptar” es presionado, la información en los campos del formulario es procesada por las 
funciones escribirarchivo () y escribircontenido (). La función escribirarchivo () toma el valor del 
campo entrada y usa getFile () para abrir o crear el archivo si no existe. El objęto Entry retornado es usado 
por createWriter () para crear un objęto FileWriter. Si la operación es exitosa, este objęto es enviado a la 
función escribircontenido (). 

La función escribircontenido () recibe el objęto FileWriter y, usando el valor del campo texto, escribe 
contenido dentro del archivo. El texto debe ser convertido en un blob antes de ser usado. Con este propósito, un 
objęto BlobBuilder es creado con el constructorBlobBuilder (), el texto es agregado a este objęto por el 
metodo append () y el contenido es recuperado como un blob usando getBlob (). Ahora la información se 
encuentra en el fermato apropiado para ser escrita dentro del archivo usando write (). 

Todo el proceso es aslncrono, por supuesto, lo que significa que el estado de la operación sera 
contantemente informado a traves de eventos. En la función escribircontenido (), solo escuchamos al evento 
writeend (usando el manejador de eventos onwriteend) para llamar a la función exito () y escribir el mensaje 
“Hecho!” en la pantalla cuando la operación es finalizada. Sin embargo, usted puede seguir el progreso o 
controlarlos errores aprovechando el resto de los eventos disparados porel objęto FileWriter. 

Hagalo usted mismo: Copie la plantilla en el Listado 12-17 dentro de un nuevo archivo HTML (esta plantilla 
usa los mismos estilos CSS del Listado 12-2). Cree un archivo Javascript llamado file. js con el código 
del Listado 12-18.Abra el documento HTML en su navegador e inserte el nombre yel texto del archivo que 
guiere crear. Si el mensaje “Hecho!” aparece en pantalla, el proceso fue exitoso. 


Agregando contenido 


Debido a que no especificamos la posición en la cual el contenido debla serescrito, el código previo simplemente 
escribira el blob al comienzo del archivo. Para seleccionar una posición especifica o agregar contenido al finał de 
un archivo ya existente, es necesario usar previamente el metodo seek (). 


function escribircontenido(fileWriter) { 

var texto=document.getElementByld('texto').value; 

fileWriter.seek(fileWriter.length); 

fileWriter.onwriteend=exito; 
var blob=new WebKitBlobBuilder(); 
blob.append(texto); 
fileWriter.write(blob.getBlob()); 

} 


Listado 12-19. Agregando contenido al finał del archivo. 

La función del Listado 12-19 mejora la anterior función escribircontenido () incorporando un metodo 
seek () para moverla posición de escritura al finał del archivo. De este modo, el contenido escrito porel metodo 
write () no sobrescribira el contenido anterior. 

Para calcular la posición del finał del archivo en bytes, usamos la propiedad length mencionada 
anteriormente. El resto del código es exactamente el mismo que en el Listado 12-18. 

Hagalo usted mismo: Reemplace la función escribircontenido () del Listado 12-18 por la nueva en el 
Listado 12-19 yabra el archivo HTML en su navegador. Inserte en el formulario el mismo nombre del archivo 
creado usando el código previo yel texto que guiere agregar al mismo. 


Leyendo contenido 


Es momento de leer lo que acabamos de escribir. El proceso de lectura usa tecnicas de la parte principal de API 
File, estudiada al comienzo de este capltulo. Vamos a usar el constructor FileReaderO y metodos de lectura 














como readAsText () para obtenerel contenido del archivo. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 

var boton=document.getElementByld('boton'); 

boton.addEventListener('click', leerarchivo, false); 

window.webkitReąuestFileSystem(window.PERSISTENT, 5*1024*1024, 

creardd, errores); 


function creardd(sistema){ 
dd=sistema.root; 

} 

function errores (e){ 

alert('Error: 'le.code); 

} 

function leerarchivo(){ 

var nombre=document.getElementByld('entrada').value; 
dd.getFile(nombre, {create: false}, function(entrada) { 

entrada.file(leercontenido, errores); 

}, errores); 

} 

function leercontenido(archivo){ 

caj adatos.innerHTML='Nombre: '+archivo.namet'<br>'; 

caj adatos.innerHTML+='Tipo: '+archivo.type+'<br>'; 

cajadatos.innerHTML+='Tamano: '+archivo.size+' bytes<br>'; 

var lector=new FileReader(); 
lector.onload=exito; 
lector.readAsText(archivo); 

} 

function exito(e){ 

var resultado=e.target.result; 

document.getElementByld('entrada').value=''; 

caj adatos.innerHTML+='Contenido: 'tresultado; 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-20. Leyendo el contenido de un archivo en el Sistema de Archivos. 

Los metodos provistos por la interface FileReader para leerel contenido de un archivo, como readAsText(), 
requieren un blob o un objęto File como atributo. El objęto File representa el archivo a ser leldo y es generado 
porel elemento <input> o una operación arrastrar y soltar. Como dijimos anteriormente, la interface FileEntry 
ofrece la opción de crear esta clase de objetos utilizando un metodo llamado file (). 

Cuando el botón “Aceptar” es presionado, la función leerarchivo () toma el valor del campo entrada del 
formulario y abre el archivo eon ese nombre usando getFile () . El objęto Entry retornado por este metodo es 
representado por la variable entrada y usado para generar el objęto File eon el metodo file (). 

Debido a que el objęto File obtenido de este modo es exactamente el mismo generado por el elemento 
<input> o la operación arrastrar y soltar, todas las mismas propiedades usadas antes estan disponibles y 
podemos mostrar información basica acerca del archivo incluso antes de que el proceso de lectura del contenido 
comience. En la función leercontenido (), los valores de estas propiedades son mostrados en pantalla y el 
contenido del archivo es leido. 

El proceso de lectura es una copia exacta del código del Listado 12-3: el objęto FileReader es creado eon el 
constructor FileReader (), el manejador de eventos onload es registrado para llamar a la función exito () 
cuando el proceso es finalizado, yel contenido del archivo es finalmente leido porel metodo readAsText(). 

En la función exito () , en lugar de imprimir un mensaje como hicimos previamente, el contenido del archivo 
es mostrado en pantalla. Para hacer esto, tomamos el valor de la propiedad result perteneciente al objęto 
FileReader ylo declaramos como contenido del elemento cajadatos. 

Hagalo Usted Mismo: El código en el Listado 12-20 utiliza solo el valor del campo entrada (no necesita 
escribir un contenido para el archivo, solo ingresar su nombre). Abra el archivo HTML eon la ultima plantilla 
en su navegador e inserte el nombre del archivo que quiere leer. Debe ser un archivo que usted ya creó 




usando códigos previos o el sistema retornara un mensaje de error (create: false). Si el nombre de 
archivo es correcto, la información sobre este archivo ysu contenido seran mostrados en pantalla. 



12.5 Sistema de archivos de la vida real 


Siempre es bueno estudiar un caso de la vida real que nos permita entender el potencial de los conceptos 
aprendidos. Para finalizar este capitulo, vamos a crear una aplicación que combina varias tecnicas de API File eon 
las posibilidades de manipulación de imagenes ofrecida por API Canvas. 

Este ejemplo toma multiples archivos de imagen y dibuja estas imagenes en el lienzo en una posición 
seleccionada al azar. Cada cambio efectuado en el lienzo es grabado en un archivo para lecturas posteriores, por 
lo tanto cada vezque acceda a la aplicación el ultimo trabajo realizado sobre el lienzo sera mostrado en pantalla. 

El documento HTML que vamos a crear es similar a la primera plantilla utilizada en este capitulo. Sin embargo, 
esta vezincluimos un elemento <canvas> dentro del elemento cajadatos: 


<!DOCTYPE html> 

Chtml lang="es"> 

<head> 

<title>File API</title> 

clink rel="stylesheet" href="file.css"> 

<script src="file . j s"X/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Imagenes:<br><input type="file" name="archivos" 

id="archivos" multiplex/p> 

</form> 

</section> 

<section id="cajadatos"> 

<canvas id="lienzo" width="500" height="350"x/canvas> 
</section> 

</body> 

</html> 


Listado 12-21. Nueva plantilla eon el elemento <canvas>. 

El código de este ejemplo incluye metodos ytecnicas de programación eon las que ya esta familiarizado, pero 
la combinación de especificaciones puede resultar confusa al principio. Veamos primero el código y analicemos 
luego cada parte paso a paso: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo') ; 

lienzo=elemento.getContext('2d'); 

var archivos=document.getElementByld('archivos'); 

archivos.addEventListener('change', procesar, false); 

window.webkitReąuestFileSystem(window.PERSISTENT, 5*1024*1024, 

creardd, errores); 


function creardd(sistema){ 
dd=sistema.root; 
cargarlienzo (); 

} 

function errores (e){ 

alert('Error: 'le.code); 

} 

function procesar (e){ 

var archivos=e.target.files; 
for(var f=0;f<archivos.length;f++){ 
var archivo=archivos[f]; 
if(archivo.type.match(/image.*/i)){ 
var lector=new FileReader(); 
lector.onload=mostrar; 
lector.readAsDataURL(archivo); 



function mostrar(e){ 

var resultado=e.target.result; 
var imagen=new Image(); 
imagen.src=resultado; 

imagen.addEventListener("load", function(){ 
var x=Math.floor(Math.random()*451); 
var y=Math.floor(Math.random()*301); 
lienzo.drawlmage(imagen,x,y,100,100); 
grabarlienzo (); 

}, false); 

} 

function cargarlienzo () { 

dd.getFile( 1 lienzo.dat', {create: false}, function(entrada) { 
entrada.file(function(archivo){ 
var lector=new FileReader(); 
lector.onload=function (e){ 
var imagen=new Image(); 
imagen.src=e.target.result; 
imagen.addEventListener("load", function(){ 
lienzo.drawlmage(imagen, 0,0) ; 

}, false); 

} ; 

lector.readAsBinaryString(archivo); 

}, errores); 

}, errores); 

} 

function grabarlienzo () { 

var elemento=document.getElementByld('lienzo'); 
var info=elemento.toDataURL(); 

dd.getFile( 1 lienzo.dat', {create: true, exclusive: false}, 

function(entrada) { 

entrada.createWriter(function(fileWriter){ 
var blob=new WebKitBlobBuilder(); 
blob.append(info); 
fileWriter.write(blob.getBlob()); 

}, errores); 

}, errores); 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-22. Combinando API File y API Canvas. 

En este ejemplo trabajamos eon dos APls: API File (eon sus extensiones) y API Canvas. En la función 
iniciar (), ambas APls son inicializadas. El contexto para el lienzo es generado primero usando getContext (), 
y el Sistema de Archivos es solicitado despues por el metodo requestFileSystem(). 

Como siempre, una vezque el Sistema de Archivos esta listo, la función creardd() es llamada y la variable 
dd es inicializada en esta función eon una referenda al directorio ralz del Sistema de Archivos. Esta vez una 
llamada a una nueva función fue agregada al finał decreardd() eon el propósito de cargar el archivo 
conteniendo la imagen generada por la aplicación la ultima vezque fue ejecutada. 

Veamos en primer lugar como la imagen grabada en el archivo mencionado es construida. Cuando el usuario 
selecciona un nuevo archivo de imagen desde el formulario, el evento change es disparado por el elemento 
<input> y la función procesar () es llamada. Esta función toma los archivos enviados por el formulario, extrae 
cada archivo del objęto File recibido, controla si se trata de una imagen o no, yen caso positivo lee el contenido 
de cada entrada eon el metodo readAsDataURL (), retornando un valoren formato data:url. 

Como puede ver, cada archivo es leldo por la función procesar (), uno a la vez. Cada vezque una de estas 
operaciones es exitosa, el evento load es disparado yla función mostrar () es ejecutada. 

La función mostrar () toma los datos del objęto lector (recibidos a traves del evento), crea un objęto imagen 
eon el constructor image (), y asigna los datos leldos previamente como la fuente de esa imagen eon la linea 
imagen.src=resultado. 

Cuando trabajamos eon imagenes siempre debemos considerar el tiempo que la imagen tarda en ser 
cargada en memoria. Por esta razón, luego de declarar la nueva fuente del objęto imagen agregamos una 



escucha para el evento load que nos permitira procesar la imagen solo cuando fue completamente cargada. 
Cuando este evento es disparado, la función anonima declarada para responder al evento en el metodo 
addEventListener () es ejecutada. Esta función calcula una posición al azar para la imagen dentro del lienzo y 
la dibuja usando el metodo drawimage () . La imagen es reducida por este metodo a un tamańo fijo de 100x100 
pixeles, sin importar el tamańo original (estudie la función mostrar () en el Listado 12-22 para entender como 
funciona todo el proceso). 

Luego de que las imagenes seleccionadas son dibujadas, la función grabarlienzo () es llamada. Esta 
función se encargara de grabar el estado del lienzo cada vez que es modificado, permitiendo a la aplicación 
recuperar el ultimo trabajo realizado la próxima vez que es ejecutada. El metodo de API Canvas llamado 
toDataURLO es usado para retornar el contenido del lienzo como data:url. Para procesar estos datos, varias 
operaciones son realizadas dentro de grabarlienzo (). Primero, los datos en fermato data:url son almacenados 
dentro de la variable info. Luego, el archivo lienzo.dat es creado (si aun no existe) o abierto eon getFile (). Si 
esta operación es exitosa, la entrada es tornada por una función anonima y el objęto FileWriter es creado por el 
metodo createWriter (). Si esta operación es exitosa, este metodo tambien llama a una función anonima 
donde el valor de la variable info (los datos sobre el estado actual del lienzo) son agregados a un objęto 
BlobBuilder y el blob dentro del mismo es finalmente escrito dentro del archivolienzo.dat por medio de 
write(). 

IMPORTANTE: En esta oportunidad no escuchamos ningun evento del objęto FileWriter porque no hay 
nada que necesitemos hacer en caso de exito o error. Sin embargo, usted siempre puede aprovechar los 
eventos para reportar el estado de la operación en la pantalla o tener control total sobre cada parte del 
proceso. 

Bień, es momento de volver a la función cargarlienzo () . Como ya mencionamos, esta función es llamada 
por la función creardd() tan pronto como la aplicación es cargada. Tiene el propósito de leer el archivo eon el 
trabajo anterior y dibujarlo en pantalla. Aeste punto usted ya sabe de que archivo estamos hablando ycómo es 
generado, veamos entonces como esta función restaura el ultimo trabajo realizado sobre el lienzo. 

La función cargarlienzo() carga el archivolienzo.dat para obtener los datos en fermato data:url 
generados la ultima vezque el lienzo fue modificado. Si el archivo no existe, el metodo getFile () retornara un 
error, pero cuando es encontrado el metodo ejecuta una función anonima que tomara la entrada y usara el 
metodo file() para generar un objęto File eon estos datos. Este metodo, si es exitoso, tambien ejecuta una 
función anonima para leer el archivo y obtener su contenido como datos binarios usando 
readAsBinaryString(). El contenido obtenido, como ya sabemos, es una cadena de texto en fermato data:url 
que debe ser asignado como fuente de una imagen antes de ser dibujado en el lienzo. Por este motivo, lo que 
hacemos dentro de la función anonima llamada por el evento load una vez que el archivo es completamente 
cargado, es crear un objęto imagen, declarar los datos obtenidos como la fuente de esta imagen, y (cuando la 
imagen es completamente cargada) dibujarla en el lienzo eon drawimage (). 

El resultado obtenido por esta pequeńa pero interesante aplicación es sencillo: las imagenes seleccionadas 
desde el elemento <input> son dibujadas en el lienzo en una posición al azar y el estado del lienzo es 
preservado en un archivo. Si el navegador es cerrado, no importa por cuanto tiempo, la próxima vez que la 
aplicación es usada el archivo es leldo, el estado previo del lienzo es restaurado y nuestro ultimo trabajo sigue 
ahi, como si nunca lo hubiesemos abandonado. No es realmente un ejemplo util, pero se puede apreciar su 
potencial. 

Hagalo Usted Mismo: Usando la API Drag and Drop puede arrastrar y soltar archivos de imagen dentro del 
lienzo en lugar de cargar las imagenes desde el elemento <input>. Intente combinar el código del Listado 
12-22 eon algunos códigos del Capitulo 8 para integrar estas APls. 



12.6 Referenda rapida 


Del mismo modo que la API lndexedDB, las caracteristicas de API File ysus extensiones fueron organizadas en 
interfaces. Cada interface provee metodos, propiedades y eventos que trabajan combinados eon el resto para 
ofrecer diferentes alternativas eon las que crear, leer y procesar archivos. En esta referenda rapida vamos a 
presentartodas las caracteristicas estudiadas en este capitulo en un orden acorde a esta organización oficial. 

IMPORTANTE: Las descripciones presentadas en esta referenda rapida solo muestran los aspectos mas 
relevantes de cada interface. Para estudiar la especificación completa, visite nuestro sitio web y siga los 
enlaces correspondientes a este capitulo. 


Interface Blob (API File) 


Esta interface provee propiedades ymetodos para operarcon blobs. Es heredada por la interface File. 
size Esta propiedad retorna el tamańo del blob o el archivo en bytes. 
type Esta propiedad retorna el tipo de medio dentro de un blob o archivo. 

slice(comienzo, largo, tipo) Este metodo retorna la parte del blob o archivo indicada por los valores en bytes 
de los atributos comienzo y largo. 

Interface File (API File) 


Esta interface es una extensión de la interface Blob para procesar archivos. 
name Esta propiedad retorna el nombre del archivo. 


Interface FileReader (API File) 


Esta interface provee metodos, propiedades yeventos para cargar blobs yarchivos en memoria. 

readAsArrayBuffer(archivo) Este metodo retorna el contenido de blobs o archivos en el fermato ArrayBuffer. 

readAsBinaryString(archivo) Este metodo retorna el contenido de blobs o archivos como una cadena 
binaria. 

readAsText(archivo) Este metodo interpreta el contenido de blobs o archivos y lo retorna en fermato texto. 
readAsDataURL(archivo) Este metodo retorna el contenido de blobs o archivos en el fermato data:url. 
abort() Este metodo aborta el proceso de lectura. 

result Esta propiedad representa los datos retornados por los metodos de lectura. 
loadstart Este evento es disparado cuando la lectura comienza. 

progress Este evento es disparado periódicamente para reportarel estado del proceso de lectura. 
load Este evento es disparado cuando el proceso de lectura es finalizado. 
abort Este evento es disparado cuando el proceso de lectura es abortado. 
error Este evento es disparado cuando un errorocurre en el proceso. 

loadend Este evento es disparado cuando la carga del archivo es finalizada, haya sido el proceso exitoso o 
no. 


Interface LocalFileSystem (API File: Directories and System) 


Esta interface es provista para iniciar un Sistema de Archivos para la aplicación. 

requestFileSystem(tipo, tamańo, función exito, función error) Este metodo solicita la inicialización de un 
Sistema de Archivos configurado de aeuerdo a los valores de sus atributos. El atributo tipo puede 
recibir dos valores diferentes: temporary (temporario) o persistent (persistente). El tamańo debe ser 



especificado en bytes. 


Interface FileSystem (API File: Directories and System) 


Esta interface provee información acerca del Sistema de Archivos. 

name Esta propiedad retorna el nombre del Sistema de Archivos. 

root Esta propiedad retorna una referenda el directorio raizdel Sistema de Archivos. 


Interface Entry (API File: Directories and System) 


Esta interface provee metodos y propiedades para procesar entradas (archivos y directorios) en el Sistema de 
Archivos. 

isFile Esta propiedad es un valor booleano que indica si la entrada es un archivo o no. 

isDirectory Esta propiedad es un valor booleano que indica si la entrada es un directorio o no. 

name Esta propiedad retorna el nombre de la entrada. 

fulIPath Esta propiedad retorna la ruta completa de la entrada desde el directorio raiz del Sistema de 
Archivos. 

filesystem Esta propiedad contiene una referenda al Sistema de Archivos. 

moveTo(directorio, nombre, función exito, función error) Este metodo mueve una entrada a una ubicación 
diferente dentro del Sistema de Archivos. El atributo directorio representa el directorio dentro del cual 
la entrada sera movida. El atributo nombre, si es especificado, cambia el nombre de la entrada en la 
nueva ubicación. 

copyTofdirectorio, nombre, función exito, función error) Este metodo genera una copia de la entrada 
dentro del Sistema de Archivos. El atributo directorio representa el directorio dentro del cual la copia 
de la entrada sera creada. El atributo nombre, si es especificado, cambia el nombre de la copia. 

remove(función exito, función error) Este metodo elimina un archivo o un directorio vacio. 

getParentffunción exito, función error) Este metodo retorna el objęto DirectoryEntry padre de la entrada 
seleccionada. 


Interface DirectoryEntry (API File: Directories and System) 


Esta interface provee metodos para crearyleerarchivos ydirectorios. 

createReader() Este metodo crear un objęto DirectoryReader para leer entradas. 

getHlefruta, opciones, función exito, función error) Este metodo crea o lee el archivo indicado por el 
atributo ruta. El atributo opciones es declarado por dos banderas: create (crear) yexclusive 
(exclusivo). La primera indica si el archivo sera creado o no, y la segunda, cuando es declarada como 
true (verdadero), fuerza al metodo a retornar un error si el archivo ya existe. 

getDirectoryfruta, opciones, función exito, función error) Este metodo crea o lee el directorio indicado por 
el atributo ruta. El atributo opciones es declarado por dos banderas: create (crear) yexclusive 
(exclusivo). La primera indica si el directorio sera creado o no, y la segunda, cuando es declarada como 
true (verdadero), fuerza al metodo a retornar un error si el directorio ya existe. 

removeRecursively(función exito, función error) Este metodo elimina un directorio ytodo su contenido. 


Interface DirectoryReader (API File: Directories and System) 


Esta interface ofrece la posibilidad de obtener una lista de entradas en un directorio especifico. 

readEntriesffunción exito, función error) Este metodo lee un bloque de entradas desde el directorio 
seleccionado. Retorna el valor nuli si no se encuentran mas entradas. 



Interface FileEntry (API File: Directories and System) 


Esta interface provee metodos para obtener un objęto File para un archivo especifico y un objęto FileWriter 
para poder agregar contenido al mismo. 

createWriterffunción exito, función error) Este metodo crea un objęto FileWriter para escribir contenido 
dentro de un archivo. 

fileffunción exito, función error) Este metodo retorna un objęto File que representa el archivo seleccionado. 

Interface BlobBuilder (API File: Writer) 

Esta interface provee metodos para trabajarcon objetos blob. 

getBlob(tipo) Este metodo retorna el contenido de un objęto blob como un blob. 

append(datos) Este metodo agrega datos a un objęto blob. La interface provee tres metodos append() 
diferentes para agregar datos en forma de texto, blob, o como un ArrayBuffer. 

Interface FileWriter (API File: Writer) 

La interface FileWriter es una expansión de la interface FileSaver. La ultima no es descripta aqui, pero los eventos 
listados debajo son parte de ella. 

position Este propiedad retorna la posición actual en la cual se realizara la siguiente escritura. 
length Esta propiedad retorna el largo del archivo en bytes. 
write(blob) Este metodo escribe contenido en un archivo. 

seek(desplazamiento) Este metodo especifica una nueva posición en la cual se realizara la siguiente 
escritura. 

truncate(tamańo) Este metodo cambia el largo del archivo al valordel atributo tamańo (en bytes). 
writestart Este evento es disparado cuando la escritura comienza. 

progress Este evento es disparado periódicamente para informar sobre el estado del proceso de escritura. 

write Este evento es disparado cuando el proceso de escritura es finalizado. 

abort ste evento es disparado cuando el proceso de escritura es abortado. 

error Este evento es disparado si ocurre un error en el proceso de escritura. 

writeend Este evento es disparado cuando la solicitud es finalizada, haya sido exitosa o no. 

Interface FileError (API File y extensiones) 


Varios metodos en esta API retornan un valor a traves de una función para indicar errores en el proceso. Este valor 
puede ser comparado eon la siguiente lista para encontrar el error correspondiente: 

NOT_FOUND_ERR - valor 1. 

SECURITY_ERR - valor 2. 

ABORT_ERR - valor 3. 

NOT_READABLE_ERR - valor 4. 

ENCODING_ERR - valor 5 

NO_MODIFICATION_ALLOWED_ERR - valor 6. 

INVALID_STATE_ERR - valor 7. 

SYNTAX_ERR - valor 8. 

INVALID MODIRCATION ERR-valor9. 



QUOTA_EXCEEDED_ERR - valor 10. 
TYPE_MISMATCH_ERR - valor 11. 
PATH EXISTS ERR- valor 12. 




Capltulo 13 
API Communication 


13.1 Ajax nivel 2 


Esta es la primera parte de lo que llamamos API Communication. Lo que extra oficialmente es conocido como API 
Communication es en realidad un grupo de APls compuesto por XMLHttpRequest Level 2, Cross Document 
Messaging (API Web Messaging), y Web Sockets (API WebSocket). La primera de estas tres tecnologlas de 
comunicación es una mejora del viejo objęto XMLHttpRequest usado extensamente hasta estos dias para 
comunicarse eon servidores yconstruir aplicaciones Ajax. 

El nivel 2 de XMLHttpRequest incorpora nuevas caracteristicas como comunicación eon multiples origenes y 
eventos para controlar la evolución de las solicitudes. Estas mejoras simplifican códigos y ofrecen nuevas 
opciones, como interactuar eon diferentes servidores desde la misma aplicación o trabajar eon pequeńas trozos 
de datos en lugar de archivos enteros, por nombrar unas pocas. 

El elemento mas importante de esta API es, por supuesto, el objęto XMLHttpRequest. Un constructor fue 
especificado para crearlo: 

XMLHttpRequest() Este constructor retorna un objęto XMLHttpRequest por medio del cual podemos 
comenzar una solicitud y escuchar eventos para controlar el proceso de comunicación. 

El objęto creado por XMLHttpRequest () cuenta eon importantes metodos para iniciar y controlar la solicitud: 

open(metodo, url, asinerono) Este metodo configura una solicitud pendiente. El atributo metodo declara el 
tipo de metodo HTTP usado para abrir la conexión (GET o post). El atributo url declara la ubicación del 
código que va a procesar la solicitud. Y asinerono es un valor booleano para declarar si la conexión 
sera sinerona (false) o asinerona (true). De ser necesario, el metodo tambien puede incluir valores 
especificando el nombre de usuario yla clave. 

send(datos) Este es el metodo que inicia la solicitud. Existen varias versiones de este metodo en un objęto 
XMLHttpRequest para procesar diferentes tipos de datos. El atributo datos puede ser omitido, declarado 
como un ArrayBuffer, un blob, un documento, una cadena de texto, o como FormData (ya estudiaremos 
este nuevo tipo de datos mas adelante). 

abort() Este metodo cancela la solicitud. 


Obteniendo datos 


Comencemos construyendo un ejemplo que obtiene el contenido de un archivo de texto en el servidor usando el 
metodo GET. Vamos a necesitar un nuevo documento HTML eon un botón para iniciar la solicitud: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Ajax Level 2</title> 

clink rel="stylesheet" href="ajax.css"> 

<script src="aj ax . j s"X/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p><input type="button" name="boton" id="boton" 

value="Aceptar"x/p> 

</form> 

</section> 

<section id="cajadatos"x/section> 

</body> 

</html> 


Listado 13-1. Plantilla para solicitudes Ajax. 





Para hacer los códigos tan simples como sea posible mantuvimos la misma estructura HTML usada 
previamente yaplicamos solo los siguientes estilos por propósitos visuales: 


#caj aformulario{ 
float: left; 
padding: 20px; 
border: lpx solid #999999; 

} 

#caj adatos{ 
float: left; 
width: 500px; 
margin-left: 20px; 
padding: 20px; 
border: lpx solid #999999; 


Listado 13-2. Estilos para dar forma a las cajas en pantalla . 

Hagalo usted mismo: Necesita crear un archivo HTML eon la plantilla del Listado 13-1 y un archivo CSS 
llamado ajax.css eon las reglas del Listado 13-2. Para poder probar estos ejemplos, debera subir los 
archivos a su servidor, incluyendo el archivo Javascript y el que recibe la solicitud. Vamos a proveer mas 
instrucciones en cada ejemplo. 

El código para este primer ejemplo leera un archivo en el servidor y mostrara su contenido en pantalla. Ningun 
dato es enviado al servidor; solo tenemos que hacer una solicitud GET y mostrar la información obtenida en 
respuesta: 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 

var boton=document.getElementByld('boton'); 
boton.addEventListener('click', leer, false); 

} 

function leer () { 

var url="texto.txt"; 

var solicitud=new XMLHttpRequest(); 
solicitud.addEventListener('load',mostrar,false); 
solicitud.open("GET", url, true); 
solicitud.send(nuli); 

} 

function mostrar(e){ 

caj adatos.innerHTML=e.target.responseText; 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-3. Leyendo un archivo en el servidor. 

En el código del Listado 13-3 incluimos nuestra tipica función iniciar (). Esta función es llamada cuando el 
documento es cargado. Lo que hace en este caso es simplemente crear una referenda al elemento cajadatos y 
agrega una escucha para el evento click en el boton del formulario. 

Cuando el botón “Aceptar” es presionado, la función leer() es ejecutada. Aqul podemos ver en acción todos 
los metodos estudiados previamente. Primero, la URL del archivo que sera leido es declarada. No explicamos 
todavia como hacer solicitudes a diferentes servidores, por lo que este archivo debera estar ubicado en el mismo 
dominio que el código Javascript (y en este ejemplo, tambien en el mismo directorio). En el siguiente paso, el 
objęto es creado por el constructorXMLHttpRequest() y asignado a la variable solicitud. Esta variable es 
usada luego para agregar una escucha para el evento load e iniciar la solicitud usando los metodos open() y 
send(). Debido a que ningun dato sera enviado en esta solicitud, un valornull fue declarado en el metodo 
send(). En el metodo open (), en cambio, declaramos la solicitud como del tipo GET, la URL del archivo a ser 
leido, yel tipo de operación (true para asinerona). 

Una operación asinerona significa que el navegador continuara procesando el resto del código mientras 
espera que el archivo termine de ser descargado desde el servidor. El finał de la operación sera informado a 





traves del metodo load. Cuando este evento es disparado, la función mostrar () es llamada. Esta función 
reemplaza el contenido del elemento cajadatos por el valor de la propiedad responseText, y el proceso finaliza. 

Hagalo usted mismo: Para probar este ejemplo, cree un archivo de texto llamado texto.txt y agregue 
algun texto al mismo. Suba este archivo yel resto de los archivos creados eon los códigos 13-1,13-2 y 13-3 
a su servidor y abra el documento HTML en su navegador. Luego de hacer clic sobre el botón “Aceptar”, el 
contenido del archivo de texto es mostrado en pantalla. 

IMPORTANTE: Cuando la respuesta es procesada usando innerHTML, los códigos HTML y Javascript son 
procesados. Por razones de seguridad siempre es mejor usar innerText en su lugar. Usted debera tomar 
la decisión de utilizar uno u otro de aeuerdo a las caracteristicas de su aplicación. 


Propiedades response 


Existen tres tipos diferentes de propiedades response que podemos usar para obtener la información retornada 
por la solicitud: 

response Esta es una propiedad de propósito generał. Retorna la respuesta de la solicitud de aeuerdo al 
valor del atributo responseType. 

responseText Esta propiedad retorna la respuesta a la solicitud en formato texto. 
responseXML Esta propiedad retorna la respuesta a la solicitud como si fuera un documento XML. 


Eventos 


Ademas de load, la especificación incluye otros eventos para el objęto XMLHttpRequest: 
loadstart Este evento es disparado cuando la solicitud comienza. 

progress Este evento es disparado periódicamente mientras se envian o descargan datos. 
abort Este evento es disparado cuando la solicitud es abortada. 

error Este evento es disparado cuando un errorocurre durante el procesamiento de la solicitud. 
load Este evento es disparado cuando la solicitud ha sido completada. 

timeout Si un valor para timeout ha sido especificado, este evento sera disparado cuando la solicitud no 
pueda ser completada en el periodo de tiempo determinado. 

loadend Este evento es disparado cuando la solicitud ha sido completada (sin considerar si el proceso fue 
exitoso o no). 

Quizas el evento mas atractivo de todos sea progress. Este evento es disparado aproximadamente cada 50 
milisegundos para informar acerca del estado de la solicitud. Gracias a este evento podemos informaral usuario 
sobre cada paso del proceso ycrear aplicaciones de comunicación profesionales. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 

var boton=document.getElementByld('boton'); 
boton.addEventListener('click', leer, false); 

} 

function leer () { 

var url="trailer.ogg"; 

var solicitud=new XMLHttpRequest(); 

solicitud.addEventListener('loadstart',comenzar,false); 
solicitud.addEventListener('progress',estado,false); 
solicitud.addEventListener('load',mostrar,false); 

solicitud.open("GET", url, true); 
solicitud.send(nuli); 

} 

function comenzar(){ 

cajadatos.innerHTML='<progress value="0" max="100">0%</progress>'; 


function estado(e){ 

if(e.lengthComputable){ 

var por=parseInt(e.loaded/e.total*100) ; 
var barraprogreso=cajadatos.ąuerySelector("progress"); 
barraprogreso.value=por; 
barraprogreso.innerHTML=por+'%'; 


function mostrar(e){ 

caj adatos.innerHTML='Terminado'; 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-4. Informando et progreso de la solicitud. 

En el Listado 13-4, el código usa tres eventos, loadstart, progress yload, para controlar la solicitud. El 
evento loadstart llama a la función comenzar() y la barra de progreso es mostrada en la pantalla por primera 
vez. Mientras el archivo es descargado, el evento progress ejecutara la función estado() constantemente. Esta 
función informa sobre el progreso de la operación a traves del elemento <progress> creado anteriormente y el 
valorde las propiedades ofrecidas porel evento. 

Finalmente, cuando el archivo es completamente descargado, el evento load es disparado y la función 
mostrar () imprime el texto “Terminado” en la pantalla. 

IMPORTANTE: En nuestro ejemplo utilizamos innerHTML para agregar un nuevo elemento <progress> al 
documento. Esta no es una practica recomendada pero es util y conveniente por razones didacticas. 
Normalmente los elementos son agregados al documento usando el metodo Javascript createElement () 
junto eon appendChild (). 

El evento progress es declarado por la especificación en la interface ProgressEvent. Esta interface es 
comun a cada API e incluye tres valiosas propiedades para retornar información sobre el proceso que es 
monitoreado porel evento: 

lengthComputable Esta propiedad retorna true (verdadero) cuando el progreso puede ser calculado o 
false (falso) en caso contrario. Lo usamos en nuestro ejemplo para estarseguros de que los valores 
de las propiedades restantes son reales yvalidos. 

loaded Esta propiedad retorna el total de bytes ya subidos o descargados. 

total Este propiedad retorna el tamańo total de los datos que estan siendo subidos o descargados. 

IMPORTANTE: Dependiendo de su conexión a Internet, para ver como la barra de progreso trabaja, es 
posible que dęba usar archivos extensos. En el código del Listado 13-4, declaramos la URL como el 
nombre del video usado en el Capltulo 5 para trabajar eon la API de medios. Puede usar sus propios 
archivos o descargar este video en: VWWV.minkbooks.com/content/trailer.ogg. 


Enviando datos 


Hasta el momento hemos leldo información desde el servidor, pero no hemos enviado ningun dato o incluso 
usado otro metodo HTTP ademas de GET. En el siguiente ejemplo vamos a trabajar eon el metodo post y un 
nuevo objęto que nos permite enviar información usando formularios virtuales. 

En el ejemplo anterior no mencionamos como enviar datos eon el metodo GET porque, como siempre, es tan 
simple como agregar los valores a la URL. Solo tenemos que crear una ruta para la variable url como 
textfile. txt?vall=l&val2=2 y los valores especificados seran enviados junto eon la consulta. Los atributos 
vall y val2 de este ejemplo seran leldos como variables GET del lado del servidor. Por supuesto, un archivo de 
texto no puede procesar esta información, por lo que normalmente deberemos recibir los datos usando un archivo 
programado en PHP, o en cualquier otro lenguaje de procesamiento en el servidor. Las solicitudes post, por otro 
lado, no son tan simples. 

Como ya seguramente conoce, una solicitud post incluye toda la información enviada por un metodo GET pero 
tambien el cuerpo del mensaje. El cuerpo del mensaje representa cualquier información de cualquier tipo y 
tamańo a ser enviada. Un formulario HTML es normalmente la mejor manera de proveer esta información, pero 
para aplicaciones dinamicas esta no es probablemente la mejor opción o la mas apropiada. Para resolver este 
problema, la API incluye la interface FormData. Esta interface sencilla tiene solo un constructor y un metodo eon el 
que obtener y trabajar sobre objetos FormData. 




FormDataf) Este constructor retorna una objęto FormData usado luego por el metodo send() para enviar 
información. 

append(nombre, valor) Este metodo agrega datos al objęto FormData. Toma un par clave/valor como 
atributos. El atributo valor puede ser una cadena de texto o un blob. Los datos retornados representan 
un campo de formulario. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 

var boton=document.getElementByld('boton'); 
boton.addEventListener('click', enviar, false); 

} 

function enviar(){ 

var datos=new FormData(); 
datos.append('nombre','Juan'); 
datos.append('apellido','Perez'); 

var url="procesar.php"; 

var solicitud=new XMLHttpRequest(); 

solicitud.addEventListener('load', mostrar, false); 

solicitud.open("POST", url, true); 

solicitud.send(datos); 

} 

function mostrar(e){ 

caj adatos.innerHTML=e.target.responseText; 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-5. Enviando un formulario virtual. 

Cuando la información es enviada al servidor, es eon el propósito de procesarla y producir un resultado. 
Normalmente este resultado es almacenado en el servidor y algunos datos son retornados como respuesta al 
usuario. En el ejemplo del Listado 13-5, los datos son enviados al archivo procesar .php y la respuesta de este 
código es mostrada en pantalla. 

Para probar este ejemplo, el archivo procesar .php debera imprimir los valores recibidos eon un código 
similar al siguiente: 


<?PHP 

print('Su nombre es: '.$_POST['nombre'].'<br>'); 
print('Su apellido es: '.$_POST['apellido']); 

?> 


Listado 13-6. Respuesta simple a una solicitud POST (procesar.phpj. 

Veamos en primer lugar como la información fue preparada para ser enviada. En la función send() del 
Listado 13-5, el constructor FormData () es invocado y el objęto FormData retornado es almacenado en la 
variable datos. Dos pares clave/valor son agregados luego a este objęto eon los nombres nombre y apellido 
usando el metodo append() . Estos valores representaran campos de formulario. 

La inicialización de la solicitud es exactamente la misma que en códigos previos, excepto que esta vez el 
primer atributo del metodo open() es post en lugar de GET, y el atributo del metodo send() es el objęto datos 
que acabamos de construiryno un valornulo (nuli), como usamos anteriormente. 

Cuando el botón “Aceptar” es presionado, la función send() es llamada y el formulario creado dentro del 
objęto FormData es enviado al servidor. El archivo procesar .php recibe estos datos (nombre yapellido) y 
retorna un texto al navegador incluyendo esta información. La función mostrar () es ejecutada cuando el proceso 
es finalizado. La información recibida es mostrada en pantalla desde esta función a traves de la propiedad 
responseText. 

Hagalo usted mismo: Este ejemplo requiere que varios archivos sean subidos al servidor. Vamos a utilizar 
el mismo documento HTML yestilos CSS de los Listados 13-1 y 13-2. El código Javascripten el Listado 13- 
5 reemplaza al anterior. Tambien debe crear un nuevo archivo llamado procesar.php eon el código del 







Listado 13-6. Suba todos estos archivos al servidor y abra el documento HTML en su navegador. Haciendo 
clic en el botón “Aceptar”, deberia ver en pantalla el texto retornado por procesar .php. 


Solicitudes de diferente origen 


Hasta ahora hemos trabajado eon códigos y archivos de datos ubicados en el mismo directorio y en el mismo 
dominio, pero XMLHttpRequest Level 2 nos deja hacer solicitudes a diferentes origenes, lo que significa que 
podremos interactuar eon diferentes servidores desde la misma aplicación. 

El acceso de un origen a otro debe ser autorizado en el servidor. La autorización se realiza declarando los 
origenes que tienen permiso para acceder a la aplicación. Esto es hecho en la cabecera enviada por el servidor 
que aloja el archivo que procesa la solicitud. 

Por ejemplo, si nuestra aplicación esta ubicada en www.dominio1.com y desde ella accedemos al archivo 
procesar .php ubicado en www.dominio2.com, el segundo servidor debe ser configurado para declarar al origen 
www.dominiol .com como un origen valido para una solicitud XMLHttpRequest. 

Podemos especificar esta configuración desde los archivos de configuración del servidor, o declararlo en la 
cabecera desde el código. En el segundo caso, la solución para nuestro ejemplo seria tan simple como agregar 
la cabecera Access-Control-Allow-Origin al código del archivo procesar .php: 


<?PHP 

header('Access-Control-Allow-Origin: *'); 

print('Su nombre es: '.$_POST['nombre'].'<br>'); 
print('Su apellido es: '.$_POST['apellido']); 

?> 


Listado 13-7. Autorizando solicitudes de origenes multiples. 

El valor * para la cabecera Access-Control-Allow-Origin representa origenes multiples. El código del 
Listado 13-7 podrą ser accedido desde cualquier origen a menos que el valor * sea reemplazado por un origen 
especifico (por ejemplo, http://www.dominiol.com, lo que solo autorizara a aplicaciones desde el dominio 
www.dominiol .com a acceder al archivo). 

IMPORTANTE: El nuevo código PHP del Listado 13-7 agrega el valor solo a la cabecera retornada por el 
archivo procesar .php. Para incluireste parametro en la cabecera de cada uno de los archivos retornados 
por el servidor, necesitamos modificar los archivos de configuración del servidor HTTP. Para encontrar mas 
información al respecto, visite los enlaces correspondientes a este capitulo en nuestro sitio web o lea las 
instrucciones de su servidor HTTP. 


Subiendo archivos 


Subir archivos a un servidor es una tarea que tarde o tern prano todo desarrollador debe enfrentar. Es una 
caracteristica requerida por casi toda aplicación web estos dias, pero no contemplada por navegadores hasta el 
momento. Esta API se hace cargo de la situación incorporando un nuevo atributo que retorna un objęto 
XMLHttpRequestUpload. Utilizando este objęto podemos acceder a todos los metodos, propiedades yeventos de 
un objęto XMLHttpRequest pero tambien controlar el proceso de subida. 

upload Este atributo retorna un objęto XMLHttpRequestUpload. El atributo debe ser llamado desde un objęto 
XMLHttpRequest ya existente. 

Para trabajar eon este atributo vamos a necesitar una nueva plantilla eon un elemento <input> desde el que 
seleccionaremos el archivo a sersubido: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Ajax Level 2</title> 

<link rel="stylesheet" href="ajax.css"> 
<script src="ajax. js"X/script> 

</head> 




<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Archivo a Subir:<brXinput type="file" name="archivos" 

id="archivos"X/p> 

</form> 

</section> 

<section id="cajadatos"x/section> 

</body> 

</html> 


Listado 13-8. Plantilla para subir archivos. 

Para subir un archivo tenemos que usar una referencia al archivo y enviarla como un campo de formulario. El 
objęto FormData estudiado en el ejemplo anteriores capazde manejaresta clase de datos. El navegador detecta 
automaticamente la clase de información agregada al objęto FormData y crea las cabeceras apropiadas para 
iniciar la solicitud. El resto del proceso es exactamente el mismo estudiado anteriormente. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 

var archivos=document.getElementByld('archivos'); 
archivos.addEventListener('change', subir, false); 

} 

function subir (e) { 

var archivos=e.target.files; 
var archivo=archivos[0]; 

var datos=new FormData(); 
datos.append('archivo',archivo); 

var url="procesar.php"; 

var solicitud=new XMLHttpRequest(); 

var xmlupload=solicitud.upload; 

xmlupload.addEventListener('loadstart',comenzar,false); 
xmlupload.addEventListener('progress',estado,false); 
xmlupload.addEventListener('load',mostrar,false); 
solicitud.open("POST", url, true); 
solicitud.send(datos); 

} 

function comenzar(){ 

cajadatos.innerHTML='<progress value="0" max="100">0%</progress>'; 

} 

function estado(e){ 

if(e.lengthComputable){ 

var por=parseInt(e.loaded/e.total*100); 
var barraprogreso=cajadatos.ąuerySelector("progress"); 
barraprogreso.value=por; 
barraprogreso.innerHTML=por+'%'; 


function mostrar(e){ 

caj adatos.innerHTML='Terminado'; 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-9. Subiendo un archivo eon FormData. 

La principal función del Listado 13-9 es subir (). Esta función es llamada cuando el usuario selecciona un 
nuevo archivo desde el elemento <input> (y el evento change es disparado). El archivo seleccionado es recibido 
y almacenado en la variable archivo, exactamente del mismo modo que lo hicimos anteriormente para aplicar la 
API File en el Capitulo 12 ytambien para la API Drag and Drop en el Capltulo 8. Los metodos usados en cada 
ocasión retornan un objęto File. 

Una ve z que tenemos la referencia al archivo, el objęto FormData es creado y el archivo es agregado a este 





objęto por medio del metodo append() . Para enviar este formulario, iniciamos una solicitud post. Primero, un 
objęto XMLHttpRequest comun es asignado a la variable de la solicitud. Mas adelante, usando el atributo upload, 
un objęto XMLHttpRequestUpload es creado y almacenado en la variable xmlupload. Usando esta variable 
agregamos escuchas para todos los eventos disparados por el proceso de subida yfinalmente la solicitud es 
enviada send(datos). 

El resto del código hace lo mismo que en el ejemplo del Listado 13-4; en otras palabras, una barra de 
progreso es mostrada en la pantalla cuando el proceso de subida comienza y luego es actualizada de acuerdo al 
progreso del mismo. 

Hagalo usted mismo: En este ejemplo indicamos que el archivo procesar .php se encargara de procesar 
los archivos enviados al servidor, pero no hacemos nada al respecto. Para probarel código anterior, puede 
utilizar un archivo procesar .php vacio. 


Aplicación de la vida real 


Subir un archivo a la vez probablemente no sea lo que la mayorfa de los desarrolladores tengan en mente. Asi 
como tampoco lo es utilizar el elemento <input> para seleccionar los archivos a subir. En generał, todo 
programador busca que sus aplicaciones sean lo mas intuitivas posible, y que mejor manera de lograrlo que 
combinando tecnicas y metodos a los que los usuarios ya estan familiarizados. Aprovechando API Drag and Drop, 
vamos a crear una aplicación que se asemeja a lo que normalmente usamos en la vida real. Los archivos podran 
sersubidos al servidor simplemente arrastrandolos desde el Explorador de Archivos hasta un area en la pagina 
web. 

Creemos primero un documento HTML eon la caja donde soltar los archivos: 


<!DOCTYPE html> 

Chtml lang="es"> 

<head> 

<title>Ajax Level 2</title> 

<link rel="stylesheet" href="ajax.css"> 
<script src="ajax. js"X/script> 

</head> 

<body> 

<section id="cajadatos"> 

<p>Suelte los archivos aqui</p> 
</section> 

</body> 

</html> 


Listado 13-10. Area para soltar los archivos a subir. 

El código Javascript para este ejemplo es probablemente el mas complejo de los que hemos visto hasta el 
momento a lo largo del libro. No solo combina varias APls sino tambien varias funciones anónimas para 
mantenertodo organizado ydentro del mismo entorno (dentro de la misma función). Este código debe tomar los 
archivos soltados dentro del elemento cajadatos, listarlos en la pantalla, preparar el formulario virtual eon esta 
información, hacer una solicitud para subir cada archivo al servidor y actualizar las barras de progreso de cada 
uno mientras son subidos. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 

cajadatos.addEventListener('dragenter', function(e){ 

e.preventDefault(); }, false); 
cajadatos.addEventListener('dragover', function(e){ 

e.preventDefault(); }, false); 
cajadatos.addEventListener('drop', soltado, false); 

} 

function soltado(e){ 
e.preventDefault (); 
var archivos=e.dataTransfer.fileś; 
if(archivos.length){ 
var lista=''; 



for(var f=0;f<archivos.length;f++){ 
var archivo=archivos[f]; 

lista+='<blockquote>Archivo: '+archivo.name; 
lista+='<br><span><progress value="0" max="100">0% 

</progress></span>'; 

lista+='</blockquote>'; 

} 

caj adatos.innerHTML=lista; 

var cuenta=0; 

var subir=function () { 

var archivo=archivos[cuenta]; 

var datos=new FormData(); 

datos.append('archivo',archivo); 

var url="procesar.php"; 

var solicitud=new XMLHttpRequest(); 

var xmlupload=solicitud.upload; 

xmlupload.addEventListener('progress',function(e){ 
if (e.lengthComputable){ 
var hijo=cuenta+l; 

var por=parseInt(e.loaded/e.total*100); 
var barraprogreso=caj adatos.querySelector("błock 
quote:nth-child("+hijo+") > span > progress"); 
barraprogreso.value=por; 
barraprogreso.innerHTML=por+' %' ; 

} 

},false); 

xmlupload.addEventListener('load',function(){ 
var hijo=cuenta+l; 

var elemento=caj adatos.querySelector("blockquote:nth- 

child ("+hij o+" ) > span"); 
elemento.innerHTML='Terminado!' ; 

cuenta++; 

if (cuenta<archivos.length){ 
subir(); 

} 

},false); 

solicitud.open("POST", url, true); 
solicitud.send(datos); 

} 

subir (); 


window.addEventListener('load', iniciar, false); 


Listado 13-11. Subiendo archivos uno poruno. 

Bień, no es un código cómodo para analizar, pero sera facil de entendersi lo estudiamos paso a paso. Como 
siempre, todo comienza eon la llamada a la función iniciar () cuando el documento es completamente cargado. 
Esta función crea una referenda al elemento cajadatos que sera la caja donde soltar los archivos, y agrega 
escuchas para tres eventos que controlan la operación de arrastrar y soltar. Para conocer como se procesa 
exactamente esta operación, lea nuevamente el Capitulo 8. Basicamente, el evento dragenter es disparado 
cuando los archivos que son arrastrados ingresan en el area del elemento cajadatos, el evento dragover es 
disparado periódicamente cuando los archivos arrastrados estan sobre este elemento, y el evento drop es 
disparado cuando los archivos son finalmente soltados dentro de la caja en la pantalla. No debemos hacer nada 
para responder a los eventos dragenter ydragover en este ejemplo, por lo que los mismos son cancelados 
para prevenir el comportamiento por defecto del navegador. El unico evento al que responderemos es drop. La 
escucha para este evento Marna a la función soltado() cada vezque algo es soltado dentro de cajadatos. 

La primera linea de la función soltado () tambien usa el metodo preventDefault () para poder hacer eon 
los archivos lo que nosotros queremos y no lo que el navegador harla por defecto. Ahora que tenemos absoluto 
control de la situación, es tiempo de procesar los archivos soltados. Primero, necesitamos obtener la lista de 
archivos desde el elemento dataTransfer. El valor retornado es un array que almacenamos en la variable 
archivos. Para estar seguros de que lo que fue soltado son archivos y no otrą clase de elementos, controlamos 



el valor de la propiedad length eon el condicional if (archivos. length) . Si este valor es diferente a 0 o nuli 
significa que uno o mas archivos han sido soltados dentro de la caja ypodemos continuarcon el proceso. 

Es hora de procesar los archivos recibidos. Con un bucie for navegamos a traves del array archivos y 
creamos una lista de elementos <blockquote> conteniendo cada uno el nombre del archivo y una barra de 
progreso encerrada en etiquetas <span>. Una vez que la construcción de la lista es finalizada, el resultado es 
mostrado en pantalla como el contenido de cajadatos. 

Asimple vista parece que la función soltado() hace todo el trabajo, pero dentro de esta función creamos otrą 
llamada subir () que se hace cargo del proceso de subir los archivos uno por uno al servidor. Por lo tanto, luego 
de mostrar todos los archivos en pantalla la siguiente tarea es crear esta función y llamarla por cada archivo en la 
lista. 

La función subir () fue creada usando una función anonima. Dentro de esta función, primero seleccionamos 
un archivo desde el array usando la variable cuenta como indice. Esta variable fue previamente inicializada a 0, 
por lo que la primera vez que la función subir () es llamada, el primer archivo de la lista es seleccionado y 
subido. 

Para subir cada archivo usamos el mismo metodo que en anteriores ejemplos. Una referenda al archivo es 
almacenada en la variable archivo, un objęto FormData es creado usando el constructor FormData () y el 
archivo es agregado al objęto con el metodo append(). 

En esta oportunidad, solo escuchamos a dos eventos: progress y load. Cada vezque el evento progress es 
disparado, una función anonima es llamada para actualizar el estado de la barra de progreso del archivo que esta 
siendo subido. Para identificar el elemento <progress> correspondiente a ese archivo, usamos el metodo 
ąuerySelector () con la pseudo clase :nth-child() . El indice de la pseudo clase es calculado usando el valor 
de la variable cuenta. Esta variable contiene el numero del Indice del array archivos, pero este Indice comienza 
en 0 mientras que el Indice para la lista de hijos accedidos por :nth-child() se inicia en el valor 1. Para obtener 
el valor del Indice correspondiente y referenciar el elemento <progress> correcto, agregamos 1 al valor de 
cuenta, almacenamos el resultado en la variable hi jo y usamos esta variable como Indice. 

Cuando el proceso anterior es terminado, tenemos que informar sobre la situación y avanzar hacia el siguiente 
archivo en el array archivos. Para este propósito, en la función anonima ejecutada cuando el evento load es 
disparado, inerementamos el valor de cuenta en una unidad, reemplazamos el elemento <progress> 
correspondiente al archivo subido por el texto “Terminado!”, y llamamos a la función subir () nuevamente 
(siempre y cuando queden aun archivos por procesar). 

Volvamos un poco a ver a grandes rasgos como el proceso es desarrollado. Si sigue el código del Listado 13- 
11, vera que, luego de declarar la función subir (), esta es llamada por primera vez al finał de la función 
soltado (). Debido a que la variable cuenta es inicializada a 0, el primer archivo contenido en el array archivos 
sera procesado en primer lugar. Mas adelante, cuando este archivo es subido por completo, el evento load es 
disparado y la función anonima llamada para responder al mismo inerementara el valor de cuenta una unidad y 
ejecutara la función subir () nuevamente para procesar el archivo siguiente. Al finał, todos los archivos 
arrastrados y soldados dentro de la caja en pantalla habran sido subidos al servidor, uno por uno. 



13.2 Cross Document Messaging 


Esta parte de lo que llamamos API Communication es conocida oficialmente como API Web Messaging. Cross 
Document Messaging es una tecnica que permite a aplicaciones de diferentes origenes comunicarse entre si. 
Aplicaciones funcionando en diferentes cuadros, ventanas o pestańas (o incluso otras APls) pueden comunicarse 
ahora aprovechando esta tecnologfa. El procedimiento es simple: publicamos un mensaje desde un documento y 
lo procesamos en el documento destino. 


Constructor 


Para publicar mensajes, la API provee el metodo postMessage (): 

postMessage(mensaje, destino) Este metodo es aplicado al contentwindow del objęto «,*!» que recibe el 
mensaje. El atributo mensaje es una cadena de texto representando el mensaje a transmitir, y el atributo 
destino es el dominio del documento destino (que puede ser una URL o un puerto, como veremos mas 
adelante). El destino puede ser declarado como un dominio especifico, como cualquier documento 
usando el simbolo *, o como el mismo origen del documento que envia el mensaje usando el simbolo 
/. El metodo puede tambien incluir un array de puertos como tercer atributo. 


Evento message y propiedades 


El metodo de comunicación es asincrono. Para escuchar por mensajes enviados por un documento en particular, 
la API ofrece el evento message, el cual incluye algunas propiedades eon información sobre la operación: 

data Esta propiedad retorna el contenido del mensaje. 

origin Esta propiedad retorna el origen del documento que envió el mensaje, generalmente el dominio. Este 
valor puede ser usado luego para enviar un mensaje de regreso. 

source Esta propiedad retorna un objęto usado para identificar a la fuente del mensaje. Este valor puede 
ser usado para apuntar al documento que envia el mensaje, como veremos mas adelante. 


Enviando mensajes 


Para crear un ejemplo de esta API, tenemos que considerar lo siguiente: la comunicación ocurre entre diferentes 
ventanas (ventanas, cuadros, pestańas u otras APls), debido a esto debemos generar documentos ycódigos para 
cada extremo del proceso. Nuestro ejemplo incluye una plantilla eon un iframe (cuadro interno) y los códigos 
Javascript apropiados para cada documento HTML. Comencemos porel documento principal: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Cross Document Messaging</title> 

<link rel="stylesheet" href="messaging.css"> 

<script src="messaging. j s"X/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Su nombre: <input type="text" name="nombre" id="nombre" 

required></p> 

<pxinput type="button" name="boton" id="boton" 

value="Enviar"X/p> 

</form> 

</section> 

<section id="cajadatos"> 

<iframe id="iframe" src="iframe.html" width="500" 

height="350"X/iframe> 


</section> 


</body> 

</html> 


Listado 13-12. Plantilla para comunicación entre documentos. 

Como podemos ver, al igual que en plantillas previas, incluimos dos elementos <section>, pero esta vez 
cajadatos contiene un <iframe> que cargara el archivo iframe.html. Vamos a volver a esto en un momento. 
Antes agreguemos algunos estilos a esta estructura: 


łcajaformulario{ 
float: left; 
padding: 20px; 
border: lpx solid #999999; 

} 

#caj adatos{ 
float: left; 
width: 500px; 
margin-left: 20px; 
padding: 20px; 
border: lpx solid #999999; 


Listado 13-13. Estilos para las cajas en pantalla (messaging . cssj. 

El código Javascript para el documento prlncipal tiene que tomar el valor del campo nombre del formulario y 
enviarlo como un mensaje al documento dentro del iframe usando el metodo postMessage (): 


function iniciar(){ 

var boton=document.getElementByld('boton') ; 
boton.addEventListener('click', enviar, false); 

} 

function enviar(){ 

var nombre=document.getElementByld('nombre').value; 
var iframe=document.getElementByld('iframe'); 

iframe.contentWindow.postMessage(nombre, '*'); 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-14. Publicando un mensaje (messaging.js ). 

En el código del Listado 13-14, el mensaje fue compuesto por el valor del campo nombre. El simbolo * fue 
usado como valor de destino para enviar este mensaje a cualquier documento dentro del iframe (sin importar su 
origen). 

Una vezque el botón “Enviar” es presionado, la función enviar() es llamada yel valor del campo es enviado 
al contenido del iframe. Ahora es momento de tomar ese mensaje y procesarlo. Recuerde que el documento 
destinado a ser abierto en un iframe es exactamente igual a uno abierto en la ventana principal. El iframe 
simplemente simula una ventana dentro del documento. Por este motivo, vamos a crear una pequeńa plantilla 
similar a la anterior pero solo eon el propósito de mostrar la información recibida: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>iframe window</title> 

<script src="iframe . j s"X/script> 

</head> 

<body> 

<section> 

<divxb>Mensaje desde la ventana principal:</bx/div> 
<div id="cajadatos"x/div> 

</section> 







</body> 

</html> 


Listado 13 - 15 . Plantilla para el iframe (iam>.)taa). 

Esta plantilla tiene su propia cajadatos que sera usada para mostrar el mensaje recibido en la pantalla, y 
tambien su propio código Javascript para procesarlo: 


function iniciar(){ 

window.addEventListener('message', receptor, false); 

} 

function receptor(e){ 

var caj adatos=document.getElementByld('caj adatos') ; 
cajadatos.innerHTML='mensaje desde: '+e.origin+'<br>'; 
caj adatos.innerHTML+='mensaj e: '+e.data; 

} 

window.addEventListener('load', iniciar, false); 


Listado 13 - 16 . Procesando los mensajes desde el destino (nrmte.is). 

Acorde a lo que explicamos anteriormente, para escuchar los mensajes la API provee el evento message y 
algunas propiedades. En el código del Listado 13-16, una escucha para este evento fue agregada y la función 
receptor () fue declarada para responder al mismo. Esta función muestra el contenido del mensaje usando la 
propiedad data e información acerca del documento que lo envió usando el valor de origin. 

Recuerde que este código pertenece al documento HTML del iframe, no al documento principal del Listado 13- 
12. Estos son dos documentos diferentes eon sus propios entornos, objetivos y códigos (uno es abierto en la 
ventana principal yel otro dentro del iframe). 

Hagalo usted mismo: Hay un total de cinco archivos que tienen que ser creados ysubidos al servidor para 
poder probar este ejemplo. Primero, cree un nuevo archivo HTML eon el código del Listado 13-12 que sera 
nuestro documento principal. Este documento tambien requiere el archivo messaging.css eon los estilos 
del Listado 13-13 y el archivo messaging. js eon el código Javascript del Listado 13-14. La plantilla del 
Listado 13-12 contiene un elemento <iframe> eon el archivoiframe.html como su fuente. Necesitara 
crear tambien este archivo y copiar en su interior el código del Listado 13-15 y ademas generar el 
correspondiente archivo iframe. js eon los códigos del Listado 13-16. Suba todos los archivos a su 
servidor, abra el primer documento HTML en su navegador y envle su nombre o cualquier texto al iframe 
usando el formulario en pantalla. 


Filtros y multiples origenes 


Lo que hemos hecho hasta ahora no es una practica recomendable, especialmente si consideramos asuntos de 
seguridad. El código en el documento principal envla un mensaje a un iframe especifico, pero no controla los 
documentos dentro de ese iframe que estaran autorizados a leerlo (cualquier documento dentro del iframe podrą 
leer el mensaje). Del mismo modo, el código de nuestro ejemplo para el iframe no controla el origen yprocesa 
todo mensaje recibido. Ambas partes del proceso de comunicación tienen que ser mejoradas para prevenir 
abusos o errores. 

En el siguiente ejemplo, vamos a corregir esta situación y estudiar el procedimiento a seguir para responder a 
un mensaje del documento origen usando otrą propiedad del evento message llamada source. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Cross Document Messaging</title> 

<link rel="stylesheet" href="messaging.css"> 

<script src="messaging.js"x/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Su nombre: <input type="text" name="nombre" id="nombre" 









requiredx/p> 

<p><input type="button" name="boton" id="boton" 

value="Enviar"x/p> 

</form> 

</section> 

<section id="cajadatos"> 

<iframe id="iframe" src="http://www.dominio2.com/iframe.html" 

width="500" height="350"X/iframe> 

</section> 

</body> 

</html> 


Listado 13-17. Comunicandonos eon un origen/destino especificos. 

Supongamos que el nuevo documento HTML eon el código del Listado 13-17 esta localizado en 
www.dominio1.com, pero el código para el iframe es cargado desde una segunda ubicación en 
www.dominio2.com. Para prevenir abusos y errores, necesitaremos declarar estos dominios en el código y ser 
especificos sobre quien estara autorizado a leer los mensajes y desde dónde. 

En el código del Listado 13-17, no estamos solo cargando el archivo HTML para el iframe sino declarando la 
ruta completa hacia otro servidor (www.dominio2.com). El documento principal se encontrara en 
www.dominio1.com y el contenido del iframe en www.dominio2.com. Los siguientes códigos consideran esta 
situación: 


function iniciar(){ 

var boton=document.getElementByld('boton') ; 
boton.addEventListener('click', enviar, false); 

window.addEventListener('message', receptor, false); 

} 

function enviar(){ 

var nombre=document.getElementByld('nombre').value; 
var iframe=document.getElementByld('iframe'); 

iframe.contentWindow.postMessage(nombre, 'http://www.dominio2.com' ); 

} 

function receptor (e){ 

if(e.origin=='http://www.dominio2.com'){ 

document.getElementByld('nombre').value=e.data; 


window.addEventListener('load', iniciar, false); 


Listado 13-18. Comunicśndonos eon origenes especificos (messaging. js). 

Preste atención a la función enviar () en el Listado 13-18. El metodo postMessage () ahora declara un 
destino especifico para el mensaje (www.dominio2.com). Solo documentos dentro del iframe y que provengan de 
ese origen especifico podran leereste mensaje. 

En la función iniciar () del Listado 13-18 tambien agregamos una escucha para el evento message. El 
propósito de esta escucha y de la función receptor () es recibir la respuesta enviada desde el iframe. Esto 
cobrara sentido en unos minutos. 

Veamos ahora el código Javascript ejecutado en el iframe que nos ayudara a entender como un mensaje 
proveniente de un origen especifico es procesado y como respondemos al mismo (usaremos exactamente el 
mismo documento HTML del Listado 13-15 para el iframe). 


function iniciar(){ 

window.addEventListener('message', receptor, false); 

} 

function receptor(e){ 

var caj adatos=document.getElementByld('caj adatos ') ; 
if(e.origin=='http://www.dominiol.com'){ 

cajadatos.innerHTML='mensaje valido: 'fe.data; 
e.source.postMessage('mensaje recibido', e.origin); 
}else{ 











cajadatos.innerHTML='origen invalido'; 


} 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-19. Respondiendo al documento principal (i&ame.j a). 

Filtrar el origen es tan simple como comparar el valor de la propiedad origin eon el dominio del cual 
queremos leer los mensajes. Una vezque comprobamos que el origen es valido, el mensaje es mostrado en 
pantalla y luego una respuesta es enviada de regreso aprovechando el valor de la propiedad source. La 
propiedad origin es tambien usada para declarar que esta respuesta estara solo disponible para la ventana que 
envió el mensaje en primer lugar. Ahora puede regresar al Listado 13-18 para comprender como la función 
receptor () procesara esta respuesta. 

Hagalo usted mismo: Este ultimo ejemplo es un poco engańoso. Estamos usando dos orfgenes diferentes, 
por lo que necesitara dos dominios diferentes (o subdominios) para comprobar el funcionamiento de los 
códigos. Reemplace los dominios declarados en los códigos por los suyos propios y luego suba los 
archivos correspondientes al documento principal en uno y los correspondientes al iframe en el otro. El 
documento principal cargara en el iframe el código desde el segundo dominio y asi podrą ver como funciona 
el proceso de comunicación entre estos dos origenes diferentes. 




13.3 Web Sockets 


En esta parte del capitulo, describiremos el ultimo componente de lo que consideramos API Communication. API 
WebSocket ofrece soporte para comunicaciones bidireccionales entre navegadores y servidores. La 
comunicación es realizada a traves de conexiones TCP, sin enviar cabeceras HTTP, reduciendo de este modo la 
cantidad de datos transmitidos en cada llamada. Ademas, la conexión es persistente, permitiendo a los 
servidores mantener a los navegadores permanentemente informados. Esto significa que no deberemos 
encargarnos de llamar al servidor a cada momento para obtener datos actualizados; en su lugar, el servidor 
mismo de forma automatica nos enviara información acerca de la situación actual. 

WebSocket puede ser considerado poralgunos como una mejora deAjax, pero es en realidad una alternativa 
totalmente diferente de comunicación que permite la construcción de aplicaciones en tiempo real en una 
plataforma escalable (porejemplo, video juegos para multiples jugadores, salas de chat, etc...). 

La API es simple. Solo unos pocos metodos y eventos son incluidos para abrir y cerrar conexiones y enviar y 
escuchar por mensajes. Sin embargo, ningun servidor soporta este protocolo por defecto. Debido a esto, 
necesitaremos instalar nuestro propio servidor WS (servidor WebSocket) para poder establecer comunicación 
entre el navegador y el servidor que aloja a la aplicación. 


Configuración del servidor WS 


Un programador experimentado seguramente podrą descubrir por si mismo como construir un servidor WS, pero 
para aquellos que deseamos dedicar nuestro tiempo librę a actividades un tanto mas recreativas, ya se 
encuentran disponibles en la web varios códigos que nos permitiran configurar nuestro propio servidor WS y 
procesar conexiones en unos pocos minutos. Dependiendo de sus preferencias, puede optar por códigos 
programados en PHP, Java, Ruby, yotros. 

IMPORTANTE: Al momento de escribir estas lineas, la especificación esta siendo mejorada y expandida 
debido a problemas de seguridad yaun no se encuentran servidores WS disponibles que soporten estas 
mejoras. Para obtener una lista completa, visite nuestro sitio web y siga los enlaces correspondientes a 
este capitulo. 

Los siguientes ejemplos estaran orientados al uso de un servidor sencillo programado en PHP llamado 
phpwebsocket (code.google.com/p/phpwebsocket/). Este servidor utiliza un unico archivo llamado server.php 
que responde a una serie de códigos pre programados, como veremos mas adelante. El archivo debe ser subido 
a un servidor y luego ejecutado por medio de un sistema del tipo Telnet como Putty, por ejemplo. 

WebSocket usa una conexión persistente, por lo que el código del servidor WS tiene que funcionar todo el 
tiempo, capturando solicitudes y enviando actualizaciones a los navegadores conectados. Usando Putty puede 
acceder a su servidor desde una consola y ejecutar los comandos necesarios para poner el servidor WS en 
marcha. 

Hagalo usted mismo: En primer lugar debe contar eon las herramientas adecuadas. Instale su consola de 
acceso Telnet o descargue Putty desde www.chiark. 

greenend.org.uk/~sgtatham/putty/. Tambien necesita descargar el archivo server.php del servidor 
phpwebsocket disponible en http://code.google.com/ 

p/phpwebsocket/. Modifique los datos de acceso dentro de este archivo (dominio o IP de su servidor y 
puerto), y subalo a su servidor. Desde la consola Telnet acceda al servidor y ejecute el archivo eon el 
siguiente comando: php-q server.php. Esto pondra en marcha el servidorWS. 

IMPORTANTE: El servidor no solo se encarga de establecer la comunicación entre el navegador y el servidor 
sino que ademas esta a cargo de generar la respuesta adecuada. La forma de construir y realizar esta 
respuesta esta programada dentro del mismo código del servidor. Debera adaptar este código a las 
necesidades de su aplicación. 


Constructor 


Antes de programar los códigos para interactuar eon el servidor WS, veamos lo que la API ofrece eon este fin. La 
especificación declara solo una interface eon unos pocos metodos, propiedades y eventos, ademas de un 
constructor, para establecer la conexión: 

WebSocket(url) Este constructor inicia una conexión entre la aplicación y el servidor WS apuntado por el 
atributo url. Retorna un objęto WebSocket referenciando esta conexión. Un segundo atributo puede ser 
especificado para proveer un arrayeon sub protocolos de comunicación. 



Metodos 


La conexión es iniciada por el constructor, por lo que solo necesitamos dos metodos para utilizarla: 

send(datos) Este es el metodo necesario para enviar un mensaje al servidor WS. El valor del atributo datos 
representa los datos a sertransmitidos (normalmente una cadena de texto). 

close() Este metodo cierra la conexión. 


Propiedades 


Algunas propiedades no permiten conocer la configuración y el estado de la conexión: 
url Muestra la URL a la cual la aplicación esta conectada. 
protocol Esta propiedad retorna el sub protocolo usado, si existe. 

readyState Esta propiedad retorna un numero representando el estado de la conexión: 0 significa que la 
conexión no ha sido aun establecida, 1 significa que la conexión fue abierta, 2 significa que la conexión 
esta siendo cerrada, y3 significa que la conexión fue cerrada. 

bufferedAmount Esta es una propiedad extremadamente util que nos permite conocer la cantidad de datos 
requeridos pero aun no enviados al servidor. El valor retornado nos ayuda a regular la cantidad de datos 
y la frecuencia de cada solicitud para evitar saturar al servidor. 

Eventos 


Para conocer el estado de la conexión y escuchar por mensajes enviados por el servidor, debemos usar eventos. 
La API ofrece los siguientes: 

open Este evento es disparado cuando la conexión es abierta. 

message Este evento es disparado cuando un mensaje proveniente del servidorse encuentra disponible. 

error Este evento es disparado cuando ocurre un error. 

close Este evento es disparado cuando la conexión es cerrada. 

Plantilla 


El archivo server .php del servidor WS que usamos como ejemplo contiene una función process () que procesa 
una pequeńa lista de comandos predefinidos y envia de regreso la respuesta apropiada. Para probar esta API, 
vamos a usar un formulario en el que podremos ingresar uno de estos comandos y enviarlos al servidor: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>WebSocket</title> 

<link rel="stylesheet" href="websocket.css"> 

<script src="websocket. js"x/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Comando:<brxinput type="text" name="comando" 

id="comando"x/p> 

<p><input type="button" name="boton" id="boton" 

value="Enviar"x/p> 

</form> 

</section> 

<section id="cajadatos"x/section> 


</body> 

</html> 


Listado 13-20. Insertando commandos. 

Tambien crearemos un archivo CSS llamado websocket. css eon los siguientes estilos: 


#caj aformulario{ 
float: left; 
padding: 20px; 
border: lpx solid #999999; 

} 

#caj adatos{ 
float: left; 
width: 500px; 
height: 350px; 
overflow: auto; 
margin-left: 20px; 
padding: 20px; 
border: lpx solid #999999; 


Listado 13-21. Estilos habituales para las cajas. 


Iniciar la comunicación 


Como siempre, el código Javascript es responsable de todo el proceso. En el siguiente listado, crearemos 
nuestra primera aplicación de comunicaciones para entender la forma de trabajo de esta API: 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 
var boton=document.getElementByld('boton'); 
boton.addEventListener('click', enviar, false); 

socket=new WebSocket("ws://www.dominio.com:12345/server.php"); 
Socket.addEventListener('message', recibido, false); 

} 

function recibido(e){ 

var lista=cajadatos.innerHTML; 

caj adatos.innerHTML='Recibido: '+e.data+'<br>'+lista; 

} 

function enviar(){ 

var comando=document.getElementByld('comando').value; 
socket.send(comando); 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-22. Enviando mensajes al servidor. 

En la función iniciar (), el objęto WebSocket es construido yalmacenado en la variable socket. El atributo 
url del constructor apunta hacia la ubicación del archivo server .php en nuestro servidor, incluyendo el puerto de 
conexión (en este ejemplo, 12345). Generalmente la dirección del servidor WS sera declarada eon el valor IP 
correspondiente al servidor (en lugar de un dominio) y un valor de puerto como 8000 u 8080, pero esto dependera 
de sus necesidades, la configuración de su servidor, la ubicación de su archivo, etc... El uso de la IP en lugar del 
dominio es una practica recomendada para evitar el proceso de traducción DNS. En cada una de las llamadas, la 
red realiza un proceso de traducción de las direcciones web para obtener las direcciones reales de los servidores 
a los que corresponden. Si en lugar de especificar un dominio declaramos directamente la dirección IP de nuestro 
servidor, evitamos esta operación, estableciendo una comunicación mas fluida. 

Luego de que obtenemos el objęto WebSocket, una escucha para el evento message es agregada. Este 
evento sera disparado cada vezque el servidor WS envle un mensaje al navegador. La función recibidof) fue 





declarada para responder al mismo. Como en otras API, este evento tambien incluye la propiedad data que 
retorna el contenido del mensaje. En la función recibido (), usamos esta propiedad para mostrar el mensaje en 
pantalla. 

Para enviar mensajes al servidor incluimos la función enviar(). El valor insertado en el elemento <input> 
llamado comando es tornado por esta función y enviado al servidor WS usando el metodo send(). 

IMPORTANTE: El archivo server .php contiene una función llamada process () para procesar cada 
llamada y enviar una respuesta acorde a los datos recibidos. Usted puede cambiar esta función para 
satisfacer las necesidades de su aplicación, pero para nuestros ejemplos la hemos considerado 
exactamente como es ofrecido en Google Codes. La función toma el valor del mensaje recibido y lo 
compara eon una lista de comandos predefinidos. Los comandos disponibles en la versión que utilizamos 
para probar estos ejemplos sornhello, hi, name, age, datę, time, thanks, ybye. Por ejemplo, Si 
enviamos el mensaje “hello”, el servidor nos respondera “hello human”. 


Aplicación completa 


En nuestro primer ejemplo podemos ver como funciona el proceso de comunicación de esta API. El constructor 
WebSocket inicia la conexión, el metodo send() envla cada mensaje al servidor para ser procesado, y el evento 
message informa a la aplicación sobre las respuestas recibidas. Sin embargo, no cerramos la conexión, no 
controlamos por errores, e incluso no detectamos cuando la conexión estaba lista para trabajar. Veamos ahora un 
ejemplo que aprovecha todos los eventos provistos por la API para informar sobre el estado de la conexión en 
cada paso del proceso. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 
var boton=document.getElementByld('boton'); 
boton.addEventListener('click', enviar, false); 

socket=new WebSocket("ws://www.dominio.com:12345/server.php"); 

Socket.addEventListener('open', abierto, false); 

Socket.addEventListener('message', recibido, false); 

Socket.addEventListener('close', cerrado, false); 

Socket.addEventListener('error', errores, false); 

} 

function abierto (){ 

caj adatos.innerHTML='CONEXION ABIERTA<br>'; 

caj adatos.innerHTML+='Estado: 'tsocket.readyState; 

} 

function recibido(e){ 

var lista=cajadatos.innerHTML; 

caj adatos.innerHTML='Recibido: '+e.data+'<br>'+lista; 

} 

function cerrado(){ 

var lista=cajadatos.innerHTML; 

caj adatos.innerHTML='CONEXION CERRADA<br>'ilista; 

var boton=document.getElementByld('boton'); 
boton.disabled=true; 

} 

function errores (){ 

var lista=cajadatos.innerHTML; 

caj adatos.innerHTML='ERROR<br>'+lista; 

} 

function enviar(){ 

var comando=document.getElementByld('comando').value; 
if(comando=='cerrar'){ 
socket.close (); 

}else{ 

socket.send(comando); 

} 


} 

window.addEventListener('load', iniciar, false); 




Listado 13-23. Informando el estado de la conexión. 


Incluimos algunas mejoras en el código del Listado 13-23 comparado eon el ejemplo anterior. Escuchas para 
todos los eventos disponibles en el objęto WebSocket fueron agregadas junto eon las funciones apropiadas para 
responder a cada uno de ellos. Tambien mostramos el estado de la conexión cuando es abierta usando el valor 
de la propiedad readyState, cerramos la conexión usando el metodo close() cuando el comando “cerrar” es 
enviado por el usuario desde el formulario, y desactivamos el botón “Enviar” cuando la conexión es cerrada 
(bo ton. disabled=true). 

Hagalo usted mismo: Este ultimo ejemplo requiere el documento HTML y los estilos CSS de los Listados 
13-20 y 13-21. Suba estos archivos a su servidor y, si aun no lo ha hecho, ejecute el servidor WS eon la 
instrucción php -q server.php (como ya explicamos, esto es realizado desde una consola Telnet como 
Putty). Una vezque el servidores activado, abra el documento HTML en su navegador. Inserte comandos en 
el formulario en pantalla y presione el botón “Enviar”. Deberia obtener respuestas del servidor de aeuerdo al 
comando insertado (hello, hi, name, age, datę, time, thanks, o bye). Envie el comando “cerrar” para 
cerrar la conexión. 

IMPORTANTE: Si el servidor no funciona correctamente, los errores producidos seran retornados dentro de 
la consola Telnet. Controle esta consola para deseubrir inconvenientes en la conexión. 



13.4 Referenda rapida 


HTML5 incorpora tres API diferentes eon propósitos de comunicación. XMLHttpRequest Level 2 es una mejora del 
viejo objęto XMLHttpRequest usado para la construcción de aplicaciones Ajax. La API Web Messaging ofrece un 
sistema de comunicación para diferentes ventanas, pestanas, iframes, o incluso otras APls. Y la API WebSocket 
provee una nueva alternativa para establecer una conexión rapida y efectiva entre navegadores y servidores. 


XMLHttpRequest Level 2 


Esta API tiene un constructor para objetos XMLHttpRequest y algunos metodos, propiedades y eventos para 
procesar la conexión. 

XMLHttpRequest() Este constructor retorna el objęto XMLHttpRequest que necesitamos para iniciar y 
procesar una conexión eon el servidor. 

openfmetodo, url, asinerono) Este metodo abre la conexión entre la aplicación y el servidor. El atributo 
metodo determina que metodo HTTP sera usado para enviar la información (GET o post). El atributo url 
declara la ruta hacia el código que recibira y procesara esta información. Y el atributo asinerono es un 
valor booleano que establece si la conexión sera sinerona o asinerona (true para asinerona). 

send(datos) Este metodo envia el valor del atributo datos al servidor. El atributo datos puede ser un 
ArrayBuffer, un blob, un documento, una cadena de texto o un objęto FormData. 

abortf) Este metodo cancela la solicitud. 

timeout Esta propiedad establece el tiempo en milisegundos que tiene la solicitud para ser procesada. 

readyState Esta propiedad retorna un valor representando el estado de la conexión: 0 significa que el objęto 
fue construido, 1 significa que la conexión fue abierta, 2 significa que la cabecera de la respuesta ha sido 
recibida, 3 significa que la respuesta esta siendo recibida, 4 significa que la transmisión de datos ha 
sido completada. 

responseType Esta propiedad retorna el tipo de respuesta. Puede ser declarada para cambiar el tipo de 
respuesta. Los posibles valores son arraybuffer, blob, document, y text. 

response Esta propiedad retorna la respuesta a la solicitud en el formato declarado por la propiedad 
responseType. 

responseText Esta propiedad retorna la respuesta a la solicitud en formato texto. 

responseXML Esta propiedad retorna la respuesta a la solicitud como si fuera un documento XML. 

loadstart Este evento es disparado cuando la solicitud es iniciada. 

progress Este evento es disparado periódicamente mientras la solicitud es procesada. 

abort Este evento es disparado cuando la solicitud es abortada. 

error Este evento es disparado cuando ocurre un error. 

load Este evento es disparado cuando la solicitud ha sido completada exitosamente. 

timeout Este evento es disparado cuando la solicitud toma mas tiempo en ser procesada que el 
especificado por la propiedad timeout. 

loadend Este evento es disparado cuando la solicitud ha sido completada (en ambos casos, exito o error). 

Un atributo especial fue incluido para obtener un objęto XMLHttpRequestUpload en lugar del objęto 
XMLHttpRequest eon el propósito de subir datos al servidor. 

upload Este atributo retorna un objęto XMLHttpRequestUpload. Este objęto usa los mismos metodos, 
propiedades y eventos de un objęto XMLHttpRequest pero eon el propósito de procesar la subida de 
archivos. 

La API tambien incluye una interface para crear objetos FormData representando formularios HTML. 

FormData() Este constructor retorna un objęto FormData para representar un formulario HTML. 

appendfnombre, valor) Este metodo agrega datos a un objęto FormData. Cada dato agregado al objęto 
representa un campo de formulario, eon su nombre y valor declarado en los atributos. Una cadena de 
texto o un blob pueden ser provistos para el atributo valor. 



Esta API usa la interface ProgressEvent (tambien usada por otras APls para controlar el progreso de una 
operación) que incluye las siguientes propiedades: 

lengthComputable Esta propiedad es un valor booleano que determina si los valores del resto de las 
propiedades son validos. 

loaded Esta propiedad retorna la cantidad total de bytes ya descargados o subidos. 

total Esta propiedad retorna el tamańo total en bytes de los datos que estan siendo descargados o subidos. 


API Web Messaging 


Esta API esta constituida solo por una interface que provee metodos, propiedades yeventos para comunicar entre 
si aplicaciones ubicadas en diferentes ventanas, pestańas, iframes o incluso otras API. 

postMessagefmensaje, destino) Este metodo envia un mensaje a una contentwindow especifica y al 
documento declarado como destino por el atributo destino. El atributo mensaje es el mensaje a ser 
transmitido. 

message Este evento es disparado cuando un mensaje es recibido. 

data Esta propiedad del evento message retorna el contenido del mensaje recibido. 

origin Esta propiedad del evento message retorna el origen del documento que envió el mensaje. 

source Esta propiedad del evento message retorna una referenda a la ventana desde la que el mensaje fue 
enviado. 


API WebSocket 


Esta API incluye un constructor que retorna un objęto WebSocket e inicia la conexión. Ademas, provee algunos 
metodos, propiedades y eventos para controlar la comunicación entre el navegador y el servidor. 

WebSocket(url) Este constructor retorna un objęto WebSocket e inicia la conexión eon el servidor. El atributo 
url declara la ruta del código del servidor WS y el puerto de comunicación. Un array eon sub protocolos 
puede ser especificado como un segundo atributo. 

send(datos) Este metodo envla un mensaje al servidor WS. El atributo datos debe ser una cadena de texto 
eon el mensaje a serenviado. 

close() Este metodo cierra la conexión eon el servidorWS. 

url Esta propiedad muestra la URL que la aplicación esta usando para conectarse al servidorWS. 

protocol Esta propiedad retorna el sub protocolo usado por la conexión, si existe. 

readyState Esta propiedad retorna un valor representando el estado de la conexión: 0 significa que la 
conexión no ha sido aun establecida, 1 significa que la conexión fue abierta, 2 significa que la conexión 
esta siendo cerrada, y3 significa que la conexión fue cerrada. 

bufferedAmount Esta propiedad retorna la cantidad total de datos que esperan serenviados al servidor. 

open Este evento es disparado cuando la conexión es abierta. 

message Este evento es disparado cuando el servidor envia un mensaje a la aplicación. 

error Este evento es disparado cuando ocurre un error. 

close Este evento es disparado cuando la conexión es cerrada. 




Capltulo 14 
API Web Workers 


14.1 Haciendo el trabajo duro 

Javascriptse ha convertido en la principal herramienta para la construcción de aplicaciones exitosas en Internet. 
Como explicamos en el Capltulo 4, ya no es solo una alternativa para la creación de llamativos (a veces irritantes) 
trucos para la web. El lenguaje se ha vuelto una parte esencial de la web y una tecnologia que cada desarrollador 
necesita entender e implementar. 

Javascript ya ha alcanzado el estado de lenguaje de propósito generał, una condición en la cual es forzado a 
proveer caractensticas elementales que por naturaleza no posee. Este lenguaje fue concebido como un lenguaje 
interpretado, creado eon la intención de ser procesado un código a la vez. La ausencia de multiprocesamiento en 
Javascript (procesamiento de multiples códigos al mismo tiempo) reduce su eficiencia, limita su alcance y vuelve 
a algunas aplicaciones de escritorio imposibles de emular en la web. 

Web Workers es una API diseńada eon el propósito especffico de convertir Javascript en un lenguaje 
multiproceso y resolver este problema. Ahora, gracias a HTML5, podemos ejecutar códigos exigentes detras de 
escena mientras el código principal sigue siendo ejecutado en la pagina web. 


Creando un trabajador 


La forma en la que Web Workers trabaja es simple: el trabajador (worker) es construido en un archivo Javascript 
separado y los códigos son comunicados entre si a traves de mensajes. Normalmente, el mensaje enviado al 
trabajador (worker) desde el código principal es la información que queremos que sea procesada, mientras que 
los mensajes enviados en respuesta desde el trabajador representan el resultado de este procesamiento. Para 
enviar y recibir estos mensajes, la API aprovecha tecnicas implementadas en otrąs API ya estudiadas. Eventos y 
metodos que ya conocemos son usados para enviar y recibir mensajes desde un código al otro. Los siguientes 
son los elementos provistos por la API eon este propósito: 

Worker(códigoURL) Antes de comunicarnos eon el trabajador, debemos obtener un objęto que apunta al 
archivo que contiene el código del trabajador. Este metodo retorna un objęto Worker. El atributo 
códigoURL es la URL del archivo que contiene el código que sera ejecutado detras de escena. 

postMessage(mensaje) Este metodo es el mismo estudiado antes en el Capltulo 13 para Web Messaging 
API, pero ahora implementado para el objęto Worker. El metodo envla un mensaje hacia o desde el 
código del trabajador. El atributo mensaje es una cadena de texto o un objęto JSON representando el 
mensaje a sertransmitido. 

message Este es un evento ya estudiado que escucha por mensajes enviados al código. Del mismo modo 
que el metodo postMessage (), este evento puede ser aplicado en el código principal o en el trabajador. 
Utiliza la propiedad data para obtener el mensaje enviado. 


Etwiando y recibiendo mensajes 


Para estudiar como los trabajadores y el código principal se comunican entre sl, vamos a usar una plantilla 
simple conteniendo un formulario donde ingresar nuestro nombre y una caja donde mostrar la respuesta recibida. 

Todo ejemplo de Web Workers, incluso el mas sencillo, requiere al menos tres archivos: el documento 
principal, el código Javascript principal, y el archivo eon el código para el trabajador. El siguiente sera nuestro 
documento HTML: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>WebWorkers</title> 

clink rel="stylesheet" href="webworkers.css"> 
<script src="webworkers . j s"x/script> 

</head> 



<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Nombre :<brxinput type="text" name="nombre" 

id="nombre"x/p> 

<pxinput type="button" name="boton" id="boton" 

value="Enviar"x/p> 

</form> 

</section> 

<section id="cajadatos"x/section> 

</body> 

</html> 


Listado 14-1. Plantilla para probar Web Workers. 

En la plantilla incluimos un archivo CSS llamado webworkers. css que contendra las siguientes reglas: 


#caj aformulario{ 
float: left; 
padding: 20px; 
border: lpx solid #999999; 

} 

#caj adatos{ 
float: left; 
width: 500px; 
margin-left: 20px; 
padding: 20px; 
border: lpx solid #999999; 


Listado 14-2. Estilos para las cajas. 

El código Javascript para el documento principal tiene que ser capaz de enviar la información que queremos 
procesar en el trabajador. Tambien debe estar preparado para escuchar por respuestas. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 
var boton=document.getElementByld('boton'); 
boton.addEventListener('click', enviar, false); 

trabajador=new Worker('trabajador.js'); 

trabajador.addEventListener('message', recibido, false); 

} 

function enviar(){ 

var nombre=document.getElementByld('nombre').value; 

trabajador.postMessage(nombre); 

} 

function recibido(e){ 

caj adatos.innerHTML=e.data; 

} 

window.addEventListener('load', iniciar, false); 


Listado 14-3. Un uso simple de la API. 

El Listado 14-3 presenta el código para nuestro documento principal (el que se encuentra dentro del archivo 
webworkers. js). En la función iniciar (), luego de la creación de las necesarias referencias para el elemento 
caj adatos y el botón del formulario, el objęto Worker es construido. El constructor Worker () declara al archivo 
trabajador. js como el contenedor del código para el trabajador y retorna un objęto Worker referenciando a este 
archivo. Todo proceso de interacción eon este objęto sera en realidad una interacción eon el código de ese 
archivo. 

Luego de la construcción de este objęto, agregamos una escucha para el evento message eon la intensión de 
escuchar por mensajes provenientes del trabajador. Cuando un mensaje es recibido, la función recibido () es 






Ilamada y el valor de la propiedad data (el mensaje) es mostrado en pantalla. 

La otrą parte de la comunicación es realizada por la función enviar(). Cuando el usuario hace clic sobre el 
botón “Enviar”, el valor del campo nombre es enviado como un mensaje hacia el trabajador usando 
postMessage(). 

Con las funciones recibido () y enviar () a cargo de la comunicación, estamos listos para enviar mensajes 
al trabajador yprocesar sus respuestas. Es momento de prepararel código para el trabajador: 


addEventListener('message', recibido, false); 

function recibido(e){ 

var respuesta='Su nombre es 'te.data; 
postMessage(respuesta); 


Listado 14-4. Código para el trabajador (trabajador. >,). 

Del mismo modo que el código principal, el código para el trabajador tiene que escuchar constantemente por 
mensajes usando el evento message. La primera linea del código en el Listado 14-4 agrega una escucha para 
este evento. Esta escucha ejecutara la función recibido() cada vezque el evento es disparado (se recibe un 
mensaje desde el código principal). En esta función, el valor de la propiedad data es agregado a una cadena de 
texto predefinida y el resultado es enviado como respuesta usando nuevamente el metodo postMessage (). 

Hagalo usted m,ismo: Compare los códigos de los Listados 14-3 y 14-4 (el código principal y el trabajador). 
Estudie como trabaja el procedimiento de comunicación y como los mismos metodos y eventos son 
aplicados con este propósito en cada uno de los códigos. Cree los archivos necesarios para probar este 
ejemplo usando los Listados 14-1, 14-2, 14-3 y 14-4, subalos a su servidor y abra el documento HTML 
principal en su navegador. 

IMPORTANTE: Puede usar los prefijos self o this para referenciar el trabajador (por ejemplo, 
self .postMessage ()), o simplemente declare los metodos del modo que lo hicimos en el Listado 14-4. 

Este trabajador es, por supuesto, extremadamente elemental. Nada es realmente procesado. El unico 
proceso realizado es la construcción de una cadena de texto con el mensaje recibido yel envlo de la misma de 
regreso como respuesta. Sin embargo, este ejemplo es util para entender como los códigos se comunican entre 
si y como podemos aprovechar esta API. 

Apesar de su simplicidad, existen algunas cosas importantes que deberemos considerar antes de crear 
nuestros trabajadores. Los mensajes son la unica forma de comunicarse directamente con los trabajadores. 
Estos mensajes, ademas, tienen que ser creados usando cadenas de texto u objetos JSON debido a que los 
trabajadores no pueden recibir otro tipo de datos. Tampoco pueden acceder al documento, manipular elementos 
HTML, y no tienen acceso a funciones y variables del código principal. Los trabajadores son como códigos 
enlatados, solo pueden acceder a información recibida a traves de mensajes y enviar los resultados usando el 
mismo mecanismo. 


Detectando errores 


Apesar de las limitaciones mencionadas, los trabajadores son flexibles ypoderosos. Podemos usar funciones, 
metodos Javascript predefinidos y otras API desde el interior de un trabajador. Considerando la complejidad que 
estos códigos pueden alcanzar, la API Web Workers incorpora un evento especifico para informar sobre errores y 
retornartoda la información posible acerca de la situación. 

error Este evento es disparado por el objęto Worker en el código principal cada vezque ocurre un error en el 
trabajador. Usa tres propiedades para retornar información: message, filename y lineno. La propiedad 
message retorna el mensaje de error. Es una cadena de texto que nos informa que salió mai. La 
propiedad filename muestra el nombre del archivo con el código que causó el error. Esto es util cuando 
archivos externos son cargados desde el trabajador, como veremos mas adelante. Finalmente, la 
propiedad lineno retorna el numero de linea en la cual el error ocurrió. 

Veamos un ejemplo de un código que muestra errores generados porel trabajador: 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 





var boton=document.getElementByld('boton'); 
boton.addEventListener('click', enviar, false); 

trabaj ador=new Worker('trabaj ador. j s ') ; 

trabajador.addEventListener('error', errores, false); 

} 

function enviar(){ 

var nombre=document.getElementByld('nombre').value; 
trabajador.postMessage(nombre); 

} 

function errores(e){ 

cajadatos.innerHTML='ERROR: '+e.messageł'<br>'; 
cajadatos.innerHTML+='Archivo: '+e.filenamet'<br>'; 

cajadatos.innerHTML+='Linea: '+e.lineno; 

} 

window.addEventListener('load', iniciar, false); 


Listado 14-5. Usando el evento error. 

El ultimo código presentado es similaral código principal del Listado 14-3. Construye el trabajador pero solo 
utiliza el evento error debido a que no queremos escuchar por mensajes desde el trabajador en este ejemplo, 
solo controlar errores. Es inutil, porsupuesto, pero nos mostrara como los errores son retornados yque clase de 
información es ofrecida en estas situaciones. 

Para generar un error deliberadamente podemos llamar a una función no existente dentro del trabajador, 
como muestra el siguiente ejemplo: 


addEventListener('message', recibido, false); 

function recibido(e){ 
prueba (); 

} 


Listado 14-6. Un trabajador que no trabaja. 

En el trabajador debemos usar el evento message para escuchar por mensajes provenientes del código 
principal, al igual que hicimos anteriormente, porque esta es la forma en la que el proceso comienza. Cuando un 
mensaje es recibido, la función recibido () es ejecutada y la función no existente prueba () es llamada, 
generando de este modo un error. 

Tan pronto como el error ocurre, el evento error es disparado en el código principal y la función errores () 
es llamada, mostrando en pantalla los valores de las tres propiedades provistas por el evento. Estudie el código 
del Listado 14-5 para entendercómo la función toma yprocesa esta información. 

Hagalo usted mismo: Para este ejemplo, usamos el documento HTML y las reglas CSS de los Listados 14- 
1 y 14-2. Copie el código del Listado 14-5 en el archivo webworkers. js yel código del Listado 14-6 en el 
archivo trabajador. js. Abra la plantilla del Listado 14-1 en su navegador y envie desde el formulario 
cualquiertexto al trabajador. El error retornado porel trabajador sera mostrado en pantalla. 


Deteniendo trabajadores 


Los trabajadores son unidades especiales de código que estan constantemente trabajando detras de escena, 
esperando por información para ser procesada. Los trabajadores seran, la mayorla de las veces, solo requeridos 
en circunstancias especificas y para propósitos especiales. Normalmente sus servicios no seran necesarios o 
requeridos todo el tiempo, por lo que sera una buena practica detenerlos o terminar sus procesos si ya no los 
necesitamos. 

Con este objetivo, la API provee dos metodos diferentes: 
terminate() Este metodo detiene el trabajador desde el código principal. 
close() Este metodo detiene el trabajador desde dentro del trabajador mismo. 

Cuando un trabajadores detenido, todo proceso que aun se encuentra desarrollando es abortado ytoda tarea 
en el bucie de eventos es descartada. Para probar ambos metodos, vamos a crear una pequeńa aplicación que 
trabaja exactamente como nuestro primer ejemplo, pero tambien responde a dos comandos especificos: “cerrarl” 





y “cerrar2”. Si las cadenas de texto “cerrarl” o “cerrar2” son enviadas desde el formulario, el trabajador sera 
detenido por el código principal o el código del trabajador usando terminate () o close () respectivamente. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 
var boton=document.getElementByld('boton'); 
boton.addEventListener('click', enviar, false); 

trabaj ador=new Worker('trabaj ador. j s ') ; 

trabajador.addEventListener('message', recibido, false); 

} 

function enviar(){ 

var nombre=document.getElementByld('nombre').value; 

if(nombre=='cerrarl'){ 
trabajador.terminate(); 

cajadatos.innerHTML='Trabajador Detenido'; 

}else{ 

trabajador.postMessage(nombre); 

} 

} 

function recibido(e){ 

caj adatos.innerHTML=e.data; 

} 

window.addEventListener('load', iniciar, false); 


Listado 14-7. Deteniendo el trabajador desde el código principal. 

La unica diferencia entre el nuevo código del Listado 14-7 yel del Listado 14-3 es la adición de un condicional 
if para controlar la inserción del comando “cerrarl”. Si este comando es insertado en el formulario en lugar de un 
nombre, el metodo terminate () es ejecutado y un mensaje es mostrado en pantalla indicando que el trabajador 
fue detenido. Porel otro lado, si el valores diferente al comando esperado, el mensaje es enviado al trabajador. 

El código para el trabajador realizara una tarea similar. Si el mensaje recibido contiene la cadena de texto 
“cerrar2”, el trabajador se detendra a sl mismo usando el metodo close () o enviara una respuesta en caso 
contrario: 


addEventListener('message', recibido, false); 

function recibido(e){ 

if(e.data=='cerrar2'){ 

postMessage('Trabajador Detenido'); 
close () ; 

}else{ 

var respuesta='Su nombre es '-He.data; 
postMessage(respuesta); 

} 

} 


Listado 14-8. El trabajador se detiene a si mismo. 

Hagalo usted mismo: Use el mismo documento HTML y reglas CSS de los Listados 14-1 y 14-2. Copie el 
código del Listado 14-7 dentro del archivo webworkers. js yel código del Listado 14-8 dentro del archivo 
trabajador. js. Abra la plantilla en su navegador y usando el formulario envle el comando “cerrarl” o 
“cerrar2”. Luego de ingresar uno de estos comandos el trabajador no respondera mas. 


APls smcronas 


Los trabajadores pueden presentar limitaciones a la hora de interactuar eon el documento principal y acceder a 
sus elementos, pero cuando se trata de procesamiento y funcionalidad, como ya mencionamos, la situación 
mejora considerablemente. Por ejemplo, dentro de un trabajador podemos usar los metodos setTimeout () o 
setinterval (), cargar información adicional desde el servidor usando XMLHttpRequest e incluso utilizar 
algunas APls para crear códigos profesionales. Esta ultima posibilidad es la mas prometedora, pero tiene una 






trampa: deberemos aprender una implementación diferente para cada una de las APls a implementar. 

Cuando estudiamos algunas APls, la implementación presentada en esos capitulos era la llamada asincrona. 
Muchas APls ofrecen una versión asfncrona yotra sincrona. Estas diferentes versiones de la mismaAPI realizan 
las mismas tareas pero usando metodos especificos de acuerdo a la forma en que son procesadas. 

Las APls asincronas son utiles cuando las operaciones a realizar consumen recursos ytiempo que afectan el 
normal funcionamiento del documento principal. Las operaciones asincronas son realizadas detras de escena 
mientras el código principal continua procesandose sin interrupción. Los resultados son informados 
posteriormente a traves de eventos. Debido a que los trabajadores son por naturaleza asincronos (son 
procesados al mismo tiempo que el código principal) este tipo de operaciones ya no son necesarias, por lo que el 
código dentro de un trabajador se ejecuta de forma sincrona (incluyendo las APls). 

Hagalo usted mismo: No vamos a estudiar APls slncronas en este libro. Varias APls incluyen una versión 
sincrona, como API File o API lndexedDB, pero la mayorla de ellas estan aun bajo desarrollo o son 
inestables en este momento. Para mayor información y ejemplos, visite nuestro sitio web y siga los enlaces 
correspondientes a este capltulo. 


Importando códigos 


Algo que vale la pena mencionares la posibilidad de cargar archivos Javascript externos desde un trabajador. Un 
trabajador puede contener todo el código necesario para realizar cualquier tarea que se necesite, pero debido a 
que varios trabajadores pueden ser creados para el mismo documento, existe la posibilidad de que varias partes 
de este código se repita entre un trabajador y otro yse vuelva asl redundante. Podemos seleccionar estos trozos 
de código y almacenarlos en un simple archivo que sera luego cargado por cada trabajador usando el nuevo 
metodo importScripts (): 

importScripts(archivo) Este metodo carga un archivo Javascript externo para incluir código dentro de un 
trabajador. El atributo archivo indica la ruta del archivo a ser incluido. 

Si alguna vezha usado metodos en otros lenguajes de programación, seguramente habra notado la similitud 
entre importScripts () yfunciones como includef) de PHP, porejemplo. El código del archivo es incorporado 
dentro del trabajador y es ejecutado como si fuera parte de su propio código. 

Para usar el nuevo metodo importScripts () necesitamos declararlo al comienzo del trabajador. El código 
del trabajador no estara listo para operar hasta que estos archivos sean completamente cargados. 


importScripts('mascodigos.js'); 

addEventListener('message', recibido, false); 

function recibido(e){ 
prueba (); 

} 


Listado 14-9. Cargando códigos Javascript para el trabajador desde archivos externos. 

El código en el Listado 14-9 no es funcional, es solo un ejemplo de como aplicar el metodo 
importScripts (). En esta hipotetica situación, el archivo mascodigos. js conteniendo la función prueba () es 
cargado tan pronto como el trabajador es iniciado. A partir de este instante, la función pruebaf) (asi como 
cualquier otrą función dentro del archivo mascodigos. js) se encuentra disponible para el resto del código del 
trabajador. 


Trabajadores compartidos 


Lo que hemos visto hasta el momento es llamado Dedicated Worker (Trabajador Dedicado). Este tipo de 
trabajador solo responde al código desde el cual fue creado. Existe otro tipo de trabajador llamado Shared Worker 
(Trabajador Compartido), el cual responde a multiples documentos desde el mismo origen. Trabajar eon 
multiples conexiones significa que podemos compartir el mismo trabajador desde diferentes ventanas, pestańas 
o iframes, y podemos mantenera cada instancia actualizada y sineronizada para la construcción de aplicaciones 
complejas. 

Las conexiones son hechas a traves de puertos y estos puertos pueden ser almacenados en el trabajador 
para futuras referencias. Para trabajar eon Trabajadores Compartidos y puertos, esta parte de la API incorpora 




nuevas propiedades, metodos yeventos: 

SharedWorker(códigoURL) Este constructor reemplaza al constructor previo Worker () usado para 
Trabajadores Dedicados. Como siempre, el atributo códigoURL declara la ruta del archivo Javascriptcon 
el código para el trabajador. Un segundo atributo opcional puede ser agregado para especificar el 
nombre del trabajador. 

port Cuando el objęto SharedWorker es construido, un nuevo puerto es creado para este documento y 
asignado a la propiedad port. Esta propiedad sera usada mas adelante para referenciar el puerto y 
comunicarse eon el trabajador. 

connect Este es un evento especlfico usado desde dentro del trabajador para controlar nuevas conexiones. 
El evento sera disparado cada vezque un documento inicia una conexión eon el trabajador. Es util para 
seguir los pasos de todas las conexiones disponibles eon el trabajador (para referenciar todos los 
documentos que lo estan usando). 

start() Este metodo esta disponible para los objetos MessagePort (uno de los objetos retornados durante la 
construcción del trabajador compartido) y su función es iniciar el envlo de mensajes recibidos en un 
puerto. Luego de la construcción del objęto SharedWorker, este metodo debe ser llamado para iniciar la 
conexión. 

El constructor SharedWorker () retorna un objęto SharedWorker y un objęto MessagePort eon el valor del 
puerto a traves del cual la conexión eon el trabajador sera hecha. La comunicación eon el trabajador debe ser 
realizada por medio del puerto referenciado por la propiedad port. 

Para estudiar el funcionamiento de los Trabajadores Compartidos, tendremos que usar al menos dos 
documentos diferentes ubicados en el mismo origen, un archivo Javascript para cada documento y un archivo 
mas para el trabajador. 

La plantilla para nuestro ejemplo incluye un iframe donde se cargara el segundo documento HTML.Ambos, el 
documento principal yel documento dentro del iframe, compartiran el mismo trabajador. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>WebWorkers</title> 

<link rel="stylesheet" href="webworkers.css"> 

<script src="webworkers . j s"x/script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Nombre:<brxinput type="text" name="nombre" 

id= "nombre "x/p> 

<pxinput type="button" name="boton" id="boton" 

value="Enviar"X/p> 

</form> 

</section> 

<section id="cajadatos"> 

<iframe id="iframe" src="iframe.html" width="500" 

height="350"x/iframe> 

</section> 

</body> 

</html> 


Listado 14-10. Plantilla para usar Trabajadores Compartidos. 

El documento para el iframe es un simple documento HTML que incluye un elemento <section> para definir 
nuestra ya conocida cajadatos y el archivo iframe. js eon el código necesario para realizar la conexión eon el 
trabajador: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>iframe</title> 

<script src="iframe . j s"x/script> 







</head> 

<body> 

<section id="cajadatos"x/section> 
</body> 

</html> 


Listado 14-11. Plantilla para el iframe (iframe.html ) . 

Cada uno de los documentos HTML creados incluye su propio código Javascript para iniciar la conexión eon el 
trabajador y procesar sus respuestas. Estos códigos deben construir el objęto SharedWorker y usar el puerto 
referenciado por el valor de la propiedad port para enviar y recibir mensajes. Veamos primero el código para el 
documento principal: 


function iniciar(){ 

var boton=document.getElementByld('boton') ; 
boton.addEventListener('click', enviar, false); 

trabajador=new SharedWorker('trabajador.js'); 

trabajador.port.addEventListener('message', recibido, false); 
trabajador.port.start(); 

} 

function recibido(e){ 
alert(e.data); 

} 

function enviar(){ 

var nombre=document.getElementByld('nombre').value; 
trabaj ador.port.postMessagę(nombre); 

} 

window.addEventListener('load', iniciar, false); 


Listado 14-12. Conectando desde el documento principal (wetworkers.js). 

Cada uno de los documentos que necesita utilizar el trabajador compartido debera crear un objęto 
SharedWorker y establecer la conexión eon el trabajador. En el código del Listado 14-12, el objęto es construido 
usando el archivo trabajador. js como el archivo que contendra al trabajador, y luego las operaciones de 
comunicación son hechas a traves del puerto correspondiente usando la propiedad port. 

Luego de que una escucha para el evento message es agregada para escuchar por respuestas provenientes 
del trabajador, el metodo starto es llamado para iniciar el proceso de envlo de mensajes. La conexión eon el 
trabajador compartido no es establecida hasta que este metodo es ejecutado (a menos que usemos 
manejadores de eventos, como onmessage, en lugardel metodo addEventListener ()). 

La función enviar () es similar a ejemplos previos, excepto que esta vez la comunicación es realizada a 
traves del valorde la propiedad port. 

El código del iframe se asemeja al principal: 


function iniciar(){ 

trabaj ador=new SharedWorker('trabaj ador.js'); 

trabajador.port.addEventListener('message', recibido, false); 

trabaj ador.port.start() ; 

} 

function recibido(e){ 

var caj adatos=document.getElementByld('caj adatos') ; 
caj adatos.innerHTML=e.data; 

} 

window.addEventListener('load', iniciar, false); 


Listado 14-13. Conectando desde el iframe (n^e.u). 

En ambos códigos, el objęto SharedWorker es construido referenciando al mismo archivo (trabajador. js), y 
la conexión es establecida usando la propiedad port(aunque a traves de puertos diferentes). La unica diferencia 
entre el código para el documento principal y el código para el iframe es como la respuesta del trabajador sera 
procesada. En el documento principal, la función recibido() muestra una yentana de alerta (ver Listado 14-12), 
















mientras que dentro del iframe la respuesta es mostrada como un simple texto dentro del elemento cajadatos 
(ver Listado 14-13). 

Es momento de ver como el trabajador compartido administra cada conexión yenvfa mensajes en respuesta 
al documento apropiado. Recuerde que solo existe un trabajador para ambos documentos (precisamente por 
esto se llama Trabajador Compartido). Debido a esto, cada solicitud de conexión recibida por el trabajador tiene 
que ser diferenciada y almacenada para futuras referencias. \&mos a grabar estas referencias a los puertos de 
cada documento en un array llamado puertos: 


puertos=new Array () ; 

addEventListener('connect', conectar, false); 

function conectar (e){ 

puertos.push(e.ports[0]); 
e.ports[0].onmessage=enviar; 

} 

function enviar(e){ 

for(f=0; f < puertos.length; f++){ 

puertos[f].postMessage('Su nombre es 'te.data); 

} 

} 


Listado 14-14. Código para el trabajador compartido ( rabajado,-. , s ). 

El procedimiento es similaral usado para Trabajadores Dedicados. Esta vezsolo tenemos que considerar a 
que documento especifico vamos a responder, porque varios pueden estar conectados eon el trabajador al 
mismo tiempo. Con este propósito, el evento connect provee el arrayports eon el valor del nuevo puerto creado 
para la conexión que estamos estableciendo (el array contiene solo este valor localizado en el indice 0). 

Cada vez que un código solicita una nueva conexión al trabajador, el evento connect es disparado. En el 
código del Listado 14-14, este evento llama a la función conectar (). En esta función realizamos dos 
operaciones: primero, el valor del puerto es tornado de la propiedad ports (indice 0) y almacenado en el array 
puertos (inicializado al comienzo del código del trabajador). Y segundo, el manejador de eventos onmessage es 
registrado para este puerto en particular y la función enviar() es declarada como la responsable de atender los 
mensajes recibidos. 

Como resultado, cada vez que un mensaje es enviado hacia el trabajador desde el código principal, sin 
importar desde que documento, la función enviar () en el trabajador es ejecutada. En esta función usamos un 
bucie for para extraer del arraypuertos todos los puertos abiertos para este trabajador y enviar un mensaje a 
cada documento conectado. El proceso es exactamente como en los Trabajadores Dedicados, pero esta vez 
varios documentos son respondidos en lugarde uno solo. 

Hagalo usted mismo: Para probar este ejemplo, tendra que crear varios archivos y subirlos al servidor. Cree 
un archivo HTML con la plantilla del Listado 14-10 y el nombre que desee. Esta plantilla usara el mismo 
archivo webworkers. css usado a lo largo del capitulo. Cree tambien el archivo webworkers. js con el 
código del Listado 14-12, yel archivo iframe.html como la fuente del iframe con el código del Listado 14- 
11. Tambien necesitara crear el archivo trabajador. js conteniendo el código del trabajador del Listado 
14-14. Una vezque todos estos archivos son generados y subidos al servidor, abra el primer documento en 
su navegador. Use el formulario para enviar un mensaje al trabajador y ver como ambos documentos (el 
documento principal yel documento dentro del iframe) procesan la respuesta. 

IMPORTANTE: En el momento de escribir estas lineas, los Trabajadores Compartidos solo funcionan en 
navegadores basados en el motorWebKit, como Google Chrome ySafari. 




14.2 Referenda rapida 


La API Web Workers incorpora la capacidad de multiprocesamiento a Javascript. Es la API que nos permite 
procesar códigos detras de escena sin interrumpir el normal funcionamiento del código del documento principal. 


Trabajadores 


Dos clases diferentes de trabajadores son ofrecidos: Trabajadores Dedicados (Dedicated Workers) y 
Trabajadores Compartidos (Shared Workers). Ambos comparten los siguientes metodos yeventos: 

postMessage(mensaje) Este metodo envla un mensaje al trabajador, el código principal o el puerto 
correspondiente. El atributo mensaje es la cadena de texto o el objęto JSON a ser enviado. 

terminate() Este metodo detiene el trabajador desde el código principal. 

close() Este metodo detiene al trabajador desde dentro del trabajador. 

importScripts(archivo) Este metodo carga un archivo Javascript externo para incorporar código al 
trabajador. El atributo archivo indica la ruta del archivo a ser incluido. 

message Este evento es disparado cuando un mensaje es enviado al código. Puede ser usado en el 
trabajador para escuchar por mensajes provenientes del código principal o viceversa. 

error Este evento es disparado cuando ocurre un error en el trabajador. Es usado en el código principal 
para controlar por errores en el trabajador. Retorna información por medio de tres propiedades: 
message, filename ylineno. La propiedad message representa el mensaje de error, la propiedad 
filename muestra el nombre del archivo eon el código que causó el error, y la propiedad lineno retorna 
el numero de linea en la cual ocurrió el error. 


Trabajadores dedicados (Dedicated Workers) 


Los Trabajadores Dedicados tienen su propio constructor: 

Worker(códigoURL) Este constructor retorna un objęto Worker. El atributo códigoURL es la ruta del archivo 
conteniendo el trabajador. 


Trabajadores compartidos (Shared Workers) 


Debido a la naturaleza de los Trabajadores Compartidos, la API ofrece algunos metodos, propiedades yeventos 
especificos: 

SharedWorker(códigoURL) Este constructor retorna un objęto SharedWorker. El atributo códigoURL es la 
ruta del archivo conteniendo el trabajador compartido. Un segundo atributo opcional puede ser 
especificado para declararel nombre del trabajador. 

port Esta propiedad retorna el valordel puerto de la conexión eon el trabajador compartido. 

connect Este evento es disparado en el trabajador compartido cuando una nueva conexión es solicitada 
desde un documento. 

startf) E ste metodo inicia el envio de mensajes. Es usado para comenzar la conexión eon el trabajador 
compartido. 




Capltulo 15 
API History 


15.1 Interface History 


Lo que en HTML5 normalmente llamamos API History es en realidad solo una mejora de una viejaAPI que nunca 
tuvo una implementación oficial pero fue soportada por navegadores durante anos. Esta vieja API estaba 
compuesta solo por un pequeńo grupo de metodos y propiedades, algunos de ellos parte del objęto History. La 
nueva API History es precisamente una mejora de este objęto y fue incluida oficialmente en la especificación 
HTML como la interface History. Esta interface combina todos los viejos metodos y propiedades eon algunos 
nuevos para trabajarymodificarel historial del navegadorde aeuerdo a nuestras necesidades. 


Navegando por la Web 


El historial del navegador es una lista de todas las paginas web (URLs) visitadas por el usuario durante una 
sesión. Es lo que hace la navegación posible. Usando los botones de navegación a la izquierda de la barra de 
navegación de todo navegador podemos ir hacia atras o hacia adelante en este lista y visitar documentos que 
vimos anteriormente. Esta lista es construida eon URLs reales generadas por los sitios web, incluidas en cada 
enlace dentro de sus documentos. Con las flechas del navegador podemos cargar la pagina web que fue visitada 
anteriormente o volver a la ultima. 

Apesar de la practicidad de los botones de navegación, a veces es util navegar a traves del historial desde 
dentro del documento. Para simular las flechas de navegación desde Javascript, siempre contamos con los 
siguientes metodos y propiedades: 

back() Este metodo retrocede un paso en el historial (imitando la flecha izquierda del navegador). 

forward() Este metodo avanza un paso en el historial (imitando la flecha derecha del navegador). 

go(pasos) Este metodo avanza o retrocede en el historial la cantidad de pasos especificados. El atributo 
pasos puede ser un valor negativo o positivo de aeuerdo a la dirección hacia dónde queremos ir. 

length Esta propiedad retorna el numero de entradas en el historial (el total de URLs en la lista). 

Estos metodos y propiedades deben ser declarados como parte del objęto History con una expresión como 
history .back (). Tambien podemos usar el objęto Window para referenciar la ventana, pero esto no es 
necesario. Por ejemplo, si queremos regresar a la pagina anterior en el historial podemos usar los códigos 
window.history.back() O window.history.go(-1). 

IMPORTANTE: Esta parte de la API es conocida y utilizada por la mayorfa de los diseriadores y 
programadores web estos dfas. No vamos a estudiar ningun código de ejemplo sobre estos metodos, pero 
puede visitar nuestro sitio web y seguir los enlaces correspondientes a este capltulo si necesita mayor 
información al respecto. 


Nuevos metodos 


Cuando el uso del objęto XMLHttpRequest se volvió estandar y las aplicaciones Ajax se convirtieron en un exito 
extraordinario, la forma en la que los usuarios navegaban yaccedian a los documentos cambió para siempre. 
Ahora es comun programar pequenos códigos para obtener información desde el servidor y mostrarla dentro del 
documento actual, sin actualizar el contenido completo de la ventana o cargar un nuevo documento. Los usuarios 
interactuan con sitios web modernos y aplicaciones desde la misma URL, recibiendo información, ingresando 
datos y obteniendo resultados de procesos siempre desde la misma pagina web. La web ha comenzado a 
emular aplicaciones de escritorio. 

Sin embargo, la forma en la que los navegadores siguen los pasos del usuario es a traves de URLs. URLs 
son, de hecho, los datos dentro de la lista de navegación, las direcciones que indican dónde el usuario se 
eneuentra actualmente. Debido a que las nuevas aplicaciones web evitan el uso de URLs para apuntar a la 
ubicación del usuario dentro de la aplicación, pronto se volvió evidente que pasos importantes en el proceso se 
perdian sin dejar rastro alguno. Los usuarios podlan actualizar datos en una pagina web docenas de veces y aun 
asi ningun rastro de actividad quedaba almacenado en el historial del navegador para indicar los pasos seguidos. 

Nuevos metodos y propiedades fueron incorporados a la ya existente History API con la intención de modificar 



manualmente la URL en la barra de localización asf como tambien el historial del navegador simplemente 
usando código Javascript. Desde ahora tenemos la posibilidad de agregar URLs falsas al historial y de este 
modo mantener control sobre la actividad del usuario. 

pushStatefestado, titulo, url) Este metodo crea una nueva entrada en el historial. El atributo estado declara 
un valor para el estado de la entrada. Es util para identificar la entrada mas adelante y puede ser 
especificado como una cadena de texto o un objęto JSON. El atributo titulo es el titulo de la entrada, y 
el atributo url es la URL para la entrada que estamos generando en el historial (este valor reemplazara 
a la URL que aparece actualmente en la barra de localización). 

replaceState(estado, titulo, url) Este metodo trabaja exactamente igual apushState() , pero no genera 
una nueva entrada. En su lugar, reemplaza la información de la actual. 

State Esta propiedad retorna el valor del estado de la entrada actual. Este valor sera nuli (nulo) a menos 
que haya sido declarado poralguno de los metodos anteriores usando el atributo estado. 


URLs falsas 


Las URLs generadas usando metodos como pushState () son URLs falsas en el sentido de que los 
navegadores nunca controlan su validezy la existencia del documento al que supuestamente apuntan. Depende 
de nosotros asegurarnos que estas URLs falsas sean en realidad validas yutiles. 

Para crear una nueva entrada en el historial del navegador y cambiar la dirección URL dentro de la barra de 
navegación, necesitamos usar el metodo pushState (). Veamos un ejemplo de como trabaja: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>History API</title> 

<link rel="stylesheet" href="history.css"> 
<script src="history. j s"X/script> 

</head> 

<body> 

<section id="contenido"> 

Este contenido nunca es actualizado<br> 
<span id="url">pagina 2</span> 

</section> 

<aside id="cajadatos"X/aside> 

</body> 

</html> 


Listado 15-1. Plantilla basica para aplicarla API History. 

En el Listado 15-1 presentamos un código HTML eon los elementos basicos necesarios para probar esta API. 
Con este propósito, colocamos contenido permanente dentro de un elemento <section> identificado como 
contenido, un texto que se convertira en un link para generar la segunda pagina virtual, y nuestra ya 
acostumbrada cajadatos para mostrarel contenido alternativo. 

Los siguientes son los estilos basicos necesarios para diferenciar las partes que componen la plantilla: 


#contenido{ 
float: left; 
padding: 20px; 
border: lpx solid #999999; 

} 

#caj adatos{ 
float: left; 
width: 500px; 
margin-left: 20px; 
padding: 20px; 
border: lpx solid #999999; 


teontenido span{ 

















color: #0000FF; 
cursor: pointer; 


} 


Listado 15-2. Estilos para las cajas y los elementos <span> (history.css). 


Lo que vamos a hacer en este ejemplo es agregar una nueva entrada eon el metodo pushState () y actualizar 
el contenido sin recargar la pagina o cargar un nuevo documento. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 

url=document.getElementByld('url'); 

url.addEventListener('click', cambiar, false); 

} 

function cambiar(){ 

cajadatos.innerHTML='La URL es pagina2'; 
window.history.pushState(nuli, nuli, 'pagina2.html'); 

} 

window.addEventListener('load', iniciar, false); 


Listado 15-3. Generando una nueva URL y nuevo contenido (history.js). 

En la función iniciar () del Listado 15-3, creamos la referencia apropiada para el elemento cajadatos y 
agregamos una escucha para el evento click al elemento <span>. Cada vezque el usuario hace clic sobre el 
texto dentro de <span>, la función cambiar () es llamada. 

La función cambiar () realiza dos tareas: actualiza el contenido de la pagina eon nueva información e inserta 
una nueva URL al historial. Luego de que esta función es ejecutada, cajadatos muestra el texto ”La URL es 
pagina2” y la URL del documento principal en la barra de localización es reemplazada por la URL falsa 
”pagina2.html”. 

Los atributos estado y titulo para el metodo pushState () esta vezfueron declarados como nuli (nulo). El 
atributo titulo no esta siendo usado en este momento por ningun navegador y siempre lo declararemos como 
nuli, pero el atributo estado, porel contrario, es util ysera aprovechado en próximos ejemplos. 

Hagalo usted mismo: Copie la plantilla en el Listado 15-1 dentro de un archivo HTML. Cree un archivo CSS 
llamado history. css eon los estilos del Listado 15-2 y un archivo Javascript llamado history.js eon los 
códigos del Listado 15-3. Subalos a su servidor y abra el archivo HTML en su navegador. Haga clic sobre el 
texto “pagina 2” y compruebe que la URL en la barra de localización cambió por la URL falsa generada por el 
código. 


Siguiendo la pista 


Lo que hemos hecho hasta ahora es solo una manipulación del historial de la sesión. Le hicimos creer al 
navegadorque el usuario visitó una URL que, a este punto, ni siquiera existe. Luego de que el usuario hace clic 
en el enlace “pagina 2”, la URL falsa “pagina2.htmr es mostrada en la barra de localización y nuevo contenido es 
insertado en el elemento cajadatos, todo sin recargar la pagina web o cargar una nueva. Es un truco interesante 
pero no realmente util. El navegador todavla no considera a la nueva URL como un documento real. Si intenta 
retrocedero avanzaren el historial usando los botones de navegación del navegador, la URL cambia entre la que 
generamos artificialmente yla URL del documento principal, pero el contenido del documento no es modificado. 
Necesitamos detectar cuando las URLs falsas son visitadas nuevamente y realizar las modificaciones 
apropiadas al documento para mostrarel estado correspondiente a la URL actual. 

Previamente mencionamos la existencia de la propiedad state. El valor de esta propiedad es declarado 
durante la generación de la nueva URL y es usado para identificar cual es la dirección web actual. Para trabajar 
eon esta propiedad, la API provee un nuevo evento: 

popstate Este evento es disparado cuando una URL es visitada nuevamente o un documento es cargado. 
Provee la propiedad state eon el valor del estado declarado cuando la URL fue generada eon los 
metodos pushState () o replaceState (). Este valor es nuli (nulo) si la URL es real, a menos que lo 
hayamos cambiado antes usando replaceState (), como veremos en el siguiente ejemplo. 

En el próximo código mejoraremos el ejemplo previo implementando el evento popstate y el metodo 
replaceState () para detectar cual URL el usuario esta solicitando a cada momento. 







function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 

url=document.getElementByld('url'); 

url.addEventListener('click', cambiar, false); 

window.addEventListener('popstate', nuevaurl ,false); 
window.history.replaceState(1, nuli); 

} 

function cambiar(){ 
mostrar(2); 

window.history.pushState(2, nuli, 'pagina2.html'); 

} 

function nuevaurl(e){ 
mostrar(e.State); 

} 

function mostrar(actual){ 

cajadatos.innerHTML='La URL es pagina 'tactual; 

} 

window.addEventListener('load', iniciar, false); 


Listado 15-4. Controlando la ubicación del usuario (matową s). 

Debemos hacer dos cosas en nuestra aplicación para tener control absoluto sobre la situación. Primero, 
tenemos que declarar un valor de estado para cada URL que vamos a utilizar, las falsas y las reales. Y segundo, 
el contenido del documento debe ser actualizado de acuerdo a la URL actual. 

En la función iniciar () del Listado 15-4, una escucha fue agregada para el evento popstate. Esta escucha 
llamara a la función nuevaurl () cada vez que una URL es visitada nuevamente. La función simplemente 
actualizara el contenido de la cajadatos eon un mensaje indicando cual es la pagina actual. Lo que hace es 
tomar el valor de la propiedad state y enviarlo a la función mostrar () para mostrarlo en pantalla. 

Esto funcionara para cada URL falsa, pero como explicamos antes, las URLs reales no tienen un valor de 
estado por defecto. Usando el metodo replaceState () al finał de la función iniciar () cambiamos la 
información de la entrada actual (la URL real del documento principal) y declaramos el valor 1 para su estado. 
Ahora, cada vezque el usuario visite nuevamente el documento principal podremos detectarlo comprobando este 
valor. 

La función cambiar () es la misma que antes, excepto que esta vezusa la función mostrar () para actualizar 
el contenido del documento y declarar el valor 2 para el estado de la URL falsa. 

La aplicación trabaja de la siguiente forma: cuando el usuario hace clic sobre el enlace “pagina 2’’, el mensaje 
”La URL es pagina 2” es mostrado en pantalla y la URL en la barra de navegación es reemplazada por 
”pagina2.html” (incluyendo la ruta completa, por supuesto). Esto es lo que habiamos hecho hasta el momento, 
pero aquf es donde las cosas se vuelven interesantes. Si el usuario presiona la flecha izquierda en la barra de 
navegación del navegador, la URL dentro de la barra de localización sera reemplazada por la que se eneuentra en 
la posición anteriordel historial (esta es la URL real de nuestro documento) yel evento popstate sera disparado. 
Este evento Marna a la función nuevaurl () que lee el valor de la propiedad state y lo envia a la función 
mostrar () . Ahora el valor del estado es 1 (el valor que declaramos para esta URL usando el metodo 
replaceState ()) yel mensaje mostrado en la pantalla sera ”La URL es pagina 1”. Si el usuario vuelve a vi s i ta r la 
URL falsa usando la flecha derecha en la barra de navegación, el valor del estado sera 2 yel mensaje mostrado 
en pantalla sera nuevamente “La URL es pagina 2”. 

Como puede ver, el valor de la propiedad state es cualquier valor que desee usar para controlar cual es la 
URL actual yadaptar el contenido del documento a la misma. 

Hagalo usted mismo: Use los archivos eon los códigos de los Listados 15-1 y 15-2 para el documento 
HTML y los estilos CSS. Copie el código del Listado 15-4 dentro del archivo history. js ysuba todos los 
archivos a su servidor. Abra la plantilla HTML en su navegador y haga clic sobre el texto “pagina 2’’. La nueva 
URL sera mostrada yel contenido de cajadatos cambiara de acuerdo a la URL correspondiente. Presione 
las flechas izquierda y derecha en el navegador para moverse a traves del historial y ver como la URL 
cambia ycómo el contenido del documento es actualizado de acuerdo a la URL seleccionada (el contenido 
es mostrado en pantalla de acuerdo al valordel estado actual). 

IMPORTANTE: La URL “pagina2.html” generada eon el metodo pushState () en los ejemplos previos es 
considerada falsa, pero deberia ser real. El propósito de esta API no es crear URLs falsas sino proveer a los 
programadores la alternativa de registrarla actividad del usuario en el historial para podervolvera un estado 
anteriortoda vezque sea reguerido (incluso luego de que el navegador fue cerrado). Usted mismo debera 





asegurarse de que el código en su servidor retorna el apropiado contenido por cada una de las URLs 
usadas por la aplicación (las reales y las falsas). 


Ejemplo real 


La siguiente es una aplicación practica. Vkmos a usar la API History y todos los metodos estudiados 
anteriormente para cargar un grupo de cuatro imagenes desde el mismo documento. Cada imagen es asociada 
a una URL falsa que podrą ser usada mas adelante para retornar una imagen especifica desde el servidor. 

El documento principal es cargado eon una imagen por defecto. Esta imagen estara asociada al primero de 
cuatro enlaces que son parte del contenido permanente del documento. Todos estos enlaces apuntaran a URLs 
falsas referenciando un estado, no un documento real (incluyendo el enlace para el documento principal que sera 
cambiado por “pagina1.html”). Todo el proceso tendra mas sentido pronto, por ahora veamos el código de la 
plantilla HTML: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>History API</title> 

<link rel="stylesheet" href="history.css"> 

<script src="history. j s"X/script> 

</head> 

<body> 

<section id="contenido"> 

Este contenido nunca es actualizado <br> 

<span id="urll">imagen l</span> - 
<span id="url2">imagen 2</span> - 
<span id="url3">imagen 3</span> - 
<span id="url4">imagen 4</span> - 
</section> 

<aside id="cajadatos"> 

<img id="imagen" src="http://www.minkbooks.com/content/ 

monsterl.gif"> 

</aside> 

</body> 

</html> 


Listado 15-5. Plantilla para una aplicación “real”. 

La unica diferencia significativa entre esta nueva aplicación yla anterior es el numero de enlaces yla cantidad 
de URLs que estamos manejando. En el código del Listado 15-4, tenlamos dos estados, el estado 1 
correspondiente al documento principal y el estado 2 para la URL falsa “pagina2.html” generada por el metodo 
pushState (). En este caso, debemos automatizar el proceso y generar un total de cuatro URLs falsas 
correspondientes a cada imagen disponible. 


function iniciar(){ 
for(var f=l;f<5;f++){ 

url=document.getElementByld('url'+f); 
url.addEventListener('click', function(x){ 
return function (){ cambiar(x);} 

}(f), false); 

} 


window.addEventListener('popstate', nuevaurl ,false); 
window.history.replaceState(1, nuli, 'paginal.html'); 

} 

function cambiar(pagina){ 
mostrar(pagina); 

window.history.pushState(pagina, nuli, 'pagina'+pagina+'.html'); 

} 

function nuevaurl (e){ 
mostrar(e.State); 




function mostrar (actual){ 
if(actual!=null){ 

imagen=document.getElementByld('imagen'); 

imagen.src='http://www.minkbooks.com/content/monster' + 

actual + '.gif'; 


window.addEventListener('load', iniciar, false) ; 


Listado 15-6. Manipulando el historial (history.js). 

Como se puede apreciar, estamos usando las mismas funciones pero eon algunos cambios importantes. 
Primero, el metodo replaceState () en la función iniciar () tiene el atributourl declarado como 
"paginal .html”. Decidimos programar nuestra aplicación de este modo, declarando el estado del documento 
Principal como 1 ycambiando su URL por “paginal .html” (independientemente de la URL real del documento). De 
este modo sera simple pasar de un estado a otro, siempre usando el mismo fermato y los valores de la 
propiedad state para construir todas las URL utilizadas por la aplicación. Puede ver este procedimiento en la 
practica estudiando la función cambiar (). Cada vezque el usuario hace clic en uno de los enlaces de la plantilla, 
esta función es ejecutada y la URL falsa es construida eon el valor de la variable pagina y agregada al historial de 
la sesión. El valor recibido por esta función fue previamente declarado en el bucie for al comienzo de la función 
iniciar (). Este valor es declarado como 1 para el enlace “pagina 1”, 2 para el enlace “pagina 2”, y asi 
sucesivamente. 

Cada vezque una URL es visitada, la función mostrar () es ejecutada para actualizar el contenido (la imagen) 
de aeuerdo a la misma. Debido a que el evento popstate a veces es disparado en circunstancias en las que el 
valor de la propiedad state es nuli (como cuando el documento es cargado por primera vez), controlamos el 
valor recibido por la función mostrar () antes de continuar. Si este valor es diferente de nuli, significa que la 
propiedad state fue definida para esa URL, por lo tanto la imagen correspondiente eon ese estado es mostrada 
en pantalla. 

Las imagenes usadas para este ejemplo fueron nombradas monster1.gif, monster2.gif, monster3.gif y 
monster4.gif, siguiendo el mismo orden de los valores de la propiedad state. Asi, usando este valor podemos 
seleccionar la imagen a ser mostrada. Sin embargo, reeuerde que los valores usados pueden ser cualquiera que 
usted necesite yel proceso para crear URLs falsas y contenido asociado debe ser desarrollado de aeuerdo eon 
las necesidades de su aplicación. 

Tambien reeuerde que los usuarios deberian poder regresar a cualquiera de las URLs generadas por la 
aplicación y ver el contenido correspondiente en la pantalla cada vez que lo deseen. Usted debe preparar su 
servidor para procesar estas URLs de modo que cada estado de la aplicación (cada URL falsa) este disponible y 
sea siempre accesible. Por ejemplo, si un usuario abre una nueva ventana y escribe la URL “pagina2.html” en la 
barra de navegación, el servidor deberia retornar el documento principal conteniendo la imagen “monster2.gif, 
correspondiente a esta URL, y no simplemente la plantilla del Listado 15-5. La idea detras de esta API es proveer 
una alternativa para que los usuarios puedan regresar a cualquier estado previo, en cualquier momento; algo que 
solo podemos lograr volviendo validas a las URLs falsas. 

IMPORTANTE: El bucie for usado en el código del Listado 15-6 para agregar una escucha para el evento 
click a cada elemento <span> en el documento aprovecha una tecnica Javascript que nos permite enviar 
valores reales a una función. Para enviar un valor a la función que manejara el evento en un metodo 
addEventListener (), debemos declarar el valor real. Si en su lugar enviamos una variable, lo que 
realmente es enviado no es el valor de la variable sino una referenda a la misma. Por lo tanto, en este caso, 
para enviar el valor actual de la variable f en el bucie for tenemos que usar varias funciones anónimas. La 
primera función es ejecutada en el momento en el que el metodo addEventListener () es declarado. Esta 
función recibe el valor actual de la variable f (vea los parentesis al finał) y almacena este valor en la variable 
x. Luego, la función retorna una segunda función eon el valor de la variable x. Esta segunda función es la 
que sera ejecutada eon el valor correspondiente cuando el evento es disparado. Esta es una tecnica 
compleja que debera aprender junto eon otras si desea crear códigos Javascript profesionales. Para 
obtener mas información sobre este tema, visite nuestro sitio web y siga los enlaces correspondientes a 
este capitulo. 

Hagalo usted mismo: Para probar el ultimo ejemplo use el mismo documento HTML del Listado 15-5 eon 
los estilos CSS del Listado 15-2. Copie el código del Listado 15-6 dentro del archivo history.js y suba los 
archivos a su servidor. Abra la plantilla en su navegador y haga clic en los enlaces. Navegue a traves de las 
URLs seleccionadas usando los botones de navegación del navegador. Las imagenes en la pantalla 
cambiaran de aeuerdo a la URL en la barra de localización. 




15.2 Referenda rapida 

API History nos permite manipular el historial de la sesión en el navegador para seguir los pasos de los usuarios 
dentro de la aplicación. Es ta API es incluida en la especificación oficial como la interface History. Esta interface 
combina metodos ypropiedades, nuevos yviejos. 

length Esta propiedad retorna el numero total de entradas en el historial. 

State Esta propiedad retorna el valordel estado para la URL actual. 

go(pasos) Este metodo avanza o retrocede en el historial de navegación de acuerdo al valor del atributo 
paso. Este valor puede ser negativo o positivo dependiendo de la dirección de navegación deseada. 

back() Este metodo carga la URL anterior desde el historial. 

forward() Este metodo carga la URL siguiente desde el historial. 

pushStatefestado, titulo, url) Este metodo inserta nuevos datos en el historial. El atributo estado es el valor 
del estado que queremos otorgar a esta nueva entrada. El atributo titulo es el titulo de la entrada. Y el 
atributo url es la nueva URL que queremos generar en el historial. 

replaceState(estado, titulo, url) Este metodo modifica la entrada actual. El atributo estado es el valor del 
estado que queremos otorgar a la entrada actual. El atributo titulo es el titulo de la entrada. Y el 
atributo url es la nueva URL que queremos asignar a la entrada actual. 

popstate Este evento es disparado en determinadas circunstancias para informarel valordel estado actual. 




Capitulo 16 
API Offline 


16.1 Cache 


Los dias de trabajar desconectado han llegado a su fin. Debido a que este capitulo presenta API Offline (la API 
para trabajar desconectados), esta declaración puede resultar contradictoria, pero analicemoslo por un momento. 
Hemos trabajado desconectados casi toda nuestra vida. Las aplicaciones de escritorio fueron nuestra 
herramienta primaria de producción. Y ahora, de repente, la web ha emergido como la nueva plataforma de 
trabajo. Aplicaciones en linea se vuelven mas y mas complejas, y HTML5 esta haciendo la batalia entre estos dos 
mundos mas dura que nunca. Bases de datos, acceso a archivos, almacenamiento, herramientas graficas, 
edición de imagen yvideo, y multiprocesamiento son, entre otras, caracterfsticas esenciales para una aplicación 
que ahora se encuentran disponibles en la web. Nuestra actividad diaria gira cada vezmas en torno a la web, y 
nuestra ambito de producción se encuentra en la red. Los dias de trabajar desconectados son historia. 

Sin embargo, a medida que esta transición continua, las aplicaciones web se vuelven mas sofisticadas, 
requiriendo archivos mas grandes y mayor tiempo de descarga. Para cuando las aplicaciones en la web 
reemplacen definitivamente a las aplicaciones de escritorio, trabajar en linea sera imposible. Los usuarios no 
podran descargar varios megabytes de archivos cada vezque necesiten usar una aplicación y no podran contar 
eon tener conexión a la red disponible todo el tiempo. Las aplicaciones que no requieren Internet pronto 
desapareceran, pero bajo las actuales circunstancias las aplicaciones en linea estan destinadas a fracasar. 

Offline API llega para ayudarnos a resolver este dilema. Basicamente, esta API provee la alternativa de 
almacenar las aplicaciones y archivos web en el ordenador del usuario para uso futuro. Un solo acceso es 
suficiente para descargar todos los archivos requeridos y ejecutar la aplicación en todo momento, eon o sin 
conexión a Internet. Una vezque los archivos son descargados, la aplicación funciona en el navegador usando 
este cache (los archivos almacenados en el ordenador), como lo harfa una aplicación de escritorio, 
independientemente de lo que pasę eon el servidoro la conexión. 


El archivo manifiesto 


Una aplicación web o un sitio web sofisticado consistira en varios archivos, pero no todos ellos seran requeridos 
para ejecutar la aplicación y tampoco sera necesario almacenarlos a todos en el ordenador del usuario. La API 
asigna un archivo especifico para declarar la lista de archivos que la aplicación necesita para trabajar sin 
conexión. Este es solo un archivo de texto llamado “manifiesto” (manifest), conteniendo una lista de URLs que 
apuntan a la ubicación de los archivos requeridos. El manifiesto puede ser creado eon cualquier editor de texto, y 
debe comenzar eon la linea cache manifest, como en el siguiente ejemplo: 


CACHE MANIFEST 
cache.html 
cache.css 
cache.j s 


Listado 16-1. Archivo manifiesto. 

El manifiesto debera ser grabado eon la extensión .manifest y debera incluir debajo de cache manifest 
todos los archivos que la aplicación necesita para trabajar desde el ordenador del usuario sin solicitar ningun 
recurso externo. En nuestra ejemplo, tenemos el archivocache.html como el documento principal de la 
aplicación, el archivo cache. css eon los estilos CSS y el archivo cache. js conteniendo los códigos Javascript. 


Categorias 


Del mismo modo que necesitamos especificar los archivos requeridos para trabajar desconectados, tambien 
podriamos necesitar declarar explicitamente aquellos que se encuentran solo disponibles cuando estamos 
conectados. Este podrfa serel caso para algunas partes de la aplicación que solo seran utiles cuando tenemos 
acceso a Internet (por ejemplo, una sala de chat para consultas). 



Para identificar los tipos de archivos listados en el archivo manifiesto, la API introduce tres categorias: 

CACHE Esta es la categoria por defecto. Todos los archivos en esta categoria seran almacenados en el 
ordenador del usuario para uso futuro. 

NETWORK Esta categoria es considerada como una lista de aprobación; todos los archivos en su interior 
solo se encuentran disponibles en linea. 

FALLBACK Esta categoria es para archivos que podria ser util obtener del servidor cuando estamos 
conectados, pero que pueden ser reemplazados por una versión en el cache. Si el navegador detecta 
que hayconexión, intentara usar el archivo original en el servidor, en caso contrario, sera usado en su 
lugarel alternativo ubicado en el ordenador del usuario. 

Usando categorias, nuestro archivo manifiesto podria ser similar al siguiente: 


CACHE MANIFEST 

CACHE: 
cache.html 
cache.css 
cache.j s 

NETWORK: 
chat.html 

FALLBACK: 

noticias.html sinnoticias.html 


Listado 16-2. Declarando archivos por categoria. 

En el nuevo archivo manifiesto del Listado 16-2, los archivos son listados bajo la categoria correspondiente. 
Los tres archivos en la categoria cache seran descargados, almacenados en el ordenador del usuario y usados 
para esta aplicación de ahora en mas (a menos que especifiquemos algo diferente mas adelante). El archivo 
chat.html especificado en la categoria NETWORK estara solo disponible cuando el navegador tenga acceso a 
Internet. Y por ultimo, el archivo noticias.html dentro de la categoria fallback sera accedido desde el servidor 
cuando exista conexión a la red, o reemplazado por el archivo sinnoticias.html ubicado en el ordenador del 
usuario en caso contrario. Del mismo modo que los archivos dentro de la categoria cache, el archivo 
sinnoticias.html es incluido en el cache y por lo tanto almacenado en el ordenador del usuario para estar 
disponible cuando sea requerido. 

La categoria fallback es util no solo para reemplazar archivos individuales sino tambien para proveer 
alternativas para directorios completos. Por ejemplo, la linea/ sinconexion.html reemplazara cualquier 
archivo que no este disponible en el cache por el archivosinconexion.html. Esta es una forma simple de 
desviar a los usuarios hacia un documento que les recomienda conectarse a Internet cuando intentan acceder a 
una parte de la aplicación que no esta disponible sin conexión. 


Comentarios 


Los comentarios pueden ser agregados al manifiesto usando el simbolo # (uno por cada linea de comentario). 
Debido a que la lista de archivos es ordenada en categorias, puede parecer inutil el agregado de comentarios, 
pero son importantes, especialmente a la hora de realizar actualizaciones en el cache (descargar nuevas 
versiones de archivos). El archivo manifiesto no solo declara que archivos seran incluidos en el cache, sino 
cuando. Cada vezque los archivos de la aplicación son actualizados, no hayforma en la que el navegador pueda 
saberlo excepto a traves del archivo manifiesto. Si los archivos actualizados son los mismos y ninguno fue 
agregado a la lista, el archivo manifiesto lucira exactamente igual que antes, entonces el navegador no podrą 
reconocer la diferencia y seguira usando los archivos viejos que ya se encuentran en el cache. Sin embargo, 
podemos forzar al navegador a descargar nuevamente los archivos de la aplicación indicando la existencia de una 
actualización por medio del agregado de comentarios. Normalmente, un solo comentario eon la fecha de la ultima 
actualización (o cualguier otro dato) sera suficiente, como es mostrado en el siguiente ejemplo: 


CACHE MANIFEST 


CACHE: 



cache.html 
cache.css 
cache.j s 


NETWORK: 
chat.html 

FALLBACK: 

noticias.html sinnoticias.html 
# fecha 2011/08/10 


Listado 16-3. Nuevo comentario para informar sobre actualizaciones. 

Supongamos que agregamos mas código a las funciones actuales del archivo cache. js. Los usuarios 
tendran el archivo dentro del cache en sus ordenadores ylos navegadores usaran esta vieja versión en lugarde la 
nueva. Cambiando la fecha al finał del archivo manifiesto o agregando nuevos comentarios informaremos al 
navegador acerca de la actualización y todos los archivos necesarios para trabajar sin conexión seran 
nuevamente descargados, incluyendo la versión mejorada del archivo cache. js. Luego de que el cache es 
actualizado, el navegador ejecutara la aplicación usando los nuevos archivos en el ordenadordel usuario. 


Usando el archivo manifiesto 


Luego de seleccionar todos los archivos necesarios para que la aplicación pueda funcionar sin conexión a 
Internet e incluir la lista completa de URLs apuntando a estos archivos, tenemos que cargar el manifiesto desde 
nuestros documentos. La API provee un nuevo atributo para el elemento <html>que indica la ubicación de este 
archivo: 


<!DOCTYPE html> 

<html lang="es" manifest="micache.manifest"> 

<head> 

<title>Offlinę API</title> 

<link rel="stylesheet" href="cache.css"> 
<script src="cache . j s"x/script> 

</head> 

<body> 

<section id="cajadatos"> 

Aplicación para trabajar sin conexión 
</section> 

</body> 

</html> 


Listado 16-4. Cargando el archivo manifiesto. 

El Listado 16-4 muestra un pequefio documento HTML que incluye el atributo manifest en el elemento 
<html>. El atributo manifest indica la ubicación del archivo manifiesto necesario para generar el cache de la 
aplicación. Como puede ver, nada cambia en el resto del documento: los archivos para estilos CSS y códigos 
Javascript son incluidos como siempre, independientemente del contenido del archivo manifiesto. 

El manifiesto debe ser grabado eon la extensión .manifest y el nombre que desee (en nuestro ejemplo, 
micache). Cada vez que el navegador eneuentra el atributo manifest en un documento, intentara descargar el 
archivo manifiesto en primer lugary luego todos los archivos listados en su interior. El atributo manifest debe ser 
incluido en cada documento HTML que tiene que ser parte del cache de la aplicación. El proceso es transparente 
para el usuario y puede ser controlado desde código Javascript usando la API, como veremos pronto. 

Ademas de la extensión y la estructura interna del archivo manifiesto, existe otro requisito importante a 
considerar. El archivo manifiesto debe ser provisto por los servidores eon el tipo MIME apropiado. Cada archivo 
posee un tipo MIME asociado para indicar el formato de su contenido. Por ejemplo, el tipo MIME para un archivo 
HTML es text/html. Un archivo manifiesto debe ser provisto usando el tipo text/cache-manifest o el 
navegador devolvera un error. 

IMPORTANTE: El tipo MIME text/cache-manifest no forma parte de la configuración pordefecto de ningun 
servidor en este momento. Usted debera agregarlo a su servidor manualmente. Como incluir este nuevo 
tipo de archivo depende de la clase de servidor eon la que trabaje. Para algunas versiones de Apache, por 





ejemplo, el agregado de la siguiente linea en el archivo httpd. conf sera suficiente para comenzar a 
despachar estos archivos eon el tipo MIME apropiado: AddType text/cache-manifest .manifest. 



16.2 API Offline 


El archivo manifiesto por si mismo deberfa ser suficiente para generar un cache para sitios webs pequeńos o 
códigos simples, pero aplicaciones complejas demandan mayor control. El archivo manifiesto declara los 
archivos necesarios para el cache, pero no puede informar sobre cuantos de estos archivos ya fueron 
descargados, o los errores encontrados en el proceso, o cuando una actualización esta lista para ser usada, 
entre otras importantes situaciones. Considerando estos posibles escenarios, la API provee el nuevo objęto 
ApplicationCache eon metodos, propiedades yeventos para controlar todo el proceso. 


Errores 


Probablemente el evento mas importante del objęto ApplicationCache es error. Si un error ocurre durante el 
proceso de lectura de archivos desde el servidor, por ejemplo, el cache necesario para que la aplicación trabaje 
fuera de linea no podrą ser creado o actualizado. Es extremadamente importante reconocer estas situaciones y 
actuar de aeuerdo a las circunstancias. 

Usando el documento HTML presentado en el Listado 16-4, vamos a construir una pequeńa aplicación para 
entender como funciona este evento. 


function iniciar(){ 

var cache=window.applicationCache; 

cache.addEventListener('error', errores, false); 

} 

function errores (){ 
alert('error'); 

} 

window.addEventListener('load', iniciar, false); 


Listado 16-5. Controlando errores. 

El atributo applicationCache para el objęto Window usado en el código del Listado 16-5 retorna el objęto 
ApplicationCache para este documento. Luego de almacenar una referenda al objęto dentro de la variable cache, 
agregamos una escucha para el evento error. Esta escucha llamara a la función errores () cuando el evento es 
disparado yun mensaje de alerta sera mostrado informando el error. 

Hagalo usted mismo: Cree un archivo HTML eon el código del Listado 16-4, un archivo Javascript llamado 
cache. js eon el código del Listado 16-5, yun archivo manifiesto llamado micache.manifest. De aeuerdo 
a lo que hemos estudiado, debera incluir en el archivo manifiesto la lista de archivos necesarios para el 
cache dentro de la categoria cache. Para nuestro ejemplo, estos archivos son el archivo HTML, el archivo 
cache. js yel archivo cache.css (los estilos para este ultimo archivo son presentados en el Listado 16-6). 
Suba estos archivos a su servidor y abra el documento HTML en su navegador. Si elimina el archivo 
manifiesto u olvida agregar el tipo MIME correspondiente para este archivo en su servidor, el evento error 
sera disparado. Tambien puede interrumpir el acceso a Internet o usar la opción Trabajar sin Conexión 
ofrecida en Firefoxpara ver la aplicación funcionando sin conexión ydesde el nuevo cache. 

IMPORTANTE: La implementación de API Offline se eneuentra en un nivel experimental en este momento. 
Recomendamos probar los ejemplos de este capitulo en Firefoxo Google Chrome. Firefoxofrece la opción 
de desactivar la conexión y trabajar fuera de linea (haga clic en la opción Trabajar sin Conexión en el menu 
Desarrollador Web). Ademas, Firefoxes el unico navegador que nos permitira eliminar el cache para facilitar 
su estudio (vaya a Opciones/Avanzado/Red yseleccione el cache de su aplicación para eliminarlo). Por otro 
lado, Google Chrome ya ha implementado casi todos los eventos disponibles en esta API y nos permitira 
experimentar eon todas las posibilidades que ofrece. 

El archivo CSS tiene solo que incluir estilos para el elemento <section> de nuestra plantilla. Puede crear los 
suyos o utilizar los siguientes: 


#caj adatos{ 
width: 500px; 
height: 300px; 
margin: 10px; 
padding: 10px; 





border: lpx solid #999999; 


} 


Listado 16-6. Regla CSSpara la cajadatos. 


Online y offline 


Una nueva propiedad para el objęto Navigator fue incorporada. Se llama onLine e indica el actual estado de la 
conexión. Esta propiedad tiene dos eventos asociados que seran disparados cuando su valor cambie. La 
propiedad y los eventos no son parte del objęto ApplicationCache, pero son utiles para esta API. 

Online Este evento es disparado cuando el valorde la propiedad onLine cambia a true (verdadero). 

offline Este evento es disparado cuando el valorde la propiedad onLine cambia a false (falso). 

El siguiente es un ejemplo de como usarlos: 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 

window.addEventListener('Online', function(){ estado(l); }, 

false); 

window.addEventListener('offline', function(){ estado(2); }, 

false); 

} 

function estado(valor){ 
switch(valor){ 
case 1: 

caj adatos.innerHTML+='<br>Estamos Conectados'; 
break; 
case 2: 

caj adatos.innerHTML+='<br>Estamos Desconectados'; 
break; 


window.addEventListener('load', iniciar, false); 


Listado 16-7. Controlando el estado de la conexión. 

En el código del Listado 16-7, usamos funciones anónimas para manejar eventos yenviarun valora la función 
estado () eon la intención de mostrar el mensaje correspondiente en la cajadatos. Los eventos seran 
disparados cada vezque el valor de la propiedad onLine cambie. 

IMPORTANTE: No hay garantia alguna de que la propiedad retorne siempre el valor adecuado. Escuchar a 
estos eventos en un ordenador de escritorio probablemente no producira ningun efecto, incluso cuando el 
equipo sea completamente desconectado de Internet. Para probar este ejemplo, recomendamos usar la 
opción Trabajarsin Conexión ofrecida por Firefox. 

Hagalo usted mismo: Use los mismos archivos HTML y CSS de ejemplos previos. Copie el código del 
Listado 16-7 en el archivo cache. js. Usando Firefox, elimine el cache de su aplicación yabra el documento 
HTML. Para probar el funcionamiento de los eventos, puede usar la opción Trabajar sin Conexión. Cada vez 
que active o desactive esta opción, la condición cambiara y un nuevo mensaje sera automaticamente 
agregado a la cajadatos. 


Procesando el cache 


Crear o actualizar el cache puede tomar desde algunos segundos hasta varios minutos, dependiendo del tamano 
de los archivos que deben ser descargados. El proceso pasa por diferentes estados de acuerdo eon lo que el 
navegador es capazde hacer en cada momento. En una actualización normal, por ejemplo, el navegador intentara 
primero leer el archivo manifiesto para buscar por posibles actualizaciones, descargara todos los archivos 
listados en el manifiesto (si la actualización existe) e informara cuando el proceso es finalizado. Para ofrecer 
información sobre cada paso en el proceso, la API ofrece la propiedad status. Esta propiedad puede tomar los 





valores siguientes: 

UNCACHED (valor 0) Este valor indica que ningun cache fue creado aun para la aplicación. 

IDLE(valor 1) Este valorindica que el cache de la aplicación es el mas nuevo disponible yno es obsoleto. 

CHECKING (valor 2) Este valor indica que el navegador esta comprobando la existencia de nuevas 
actualizaciones. 

DOWNLOADING (valor 3) Este valor indica que los archivos para el cache estan siendo descargados. 

UPDATEREADY (valor 4) Este valor indica que el cache de la aplicación esta disponible y no es obsoleto, 
pero no es el mas nuevo (una actualización esta lista para reemplazarlo). 

OBSOLETE (valor 5) Este valor indica que el cache actual es obsoleto. 

Podemos controlar el valor de la propiedad status en cualquier momento, pero es mejor usar los eventos 
provisto por el objęto ApplicationCache para controlar el estado del proceso y el cache. Los siguientes eventos 
son normalmente disparados en secuencia, y algunos de ellos estan asociados a un estado espedfico del cache 
de la aplicación: 

checking Este evento es disparado cuando el navegador esta controlando por la existencia de 
actualizaciones. 

noupdate Este evento es disparado cuando no fueron encontrados cambios en el archivo manifiesto. 

downloading Este evento es disparado cuando el navegador encuentra una nueva actualización ycomienza 
a descargar los archivos. 

cached Este evento es disparado cuando el cache esta listo. 

updateready Este evento es disparado cuando el proceso de descarga para una actualización fue 
completado. 

obsolete Este evento es disparado cuando el archivo manifiesto ya no esta disponible y el cache esta 
siendo eliminado. 

El siguiente ejemplo nos ayudara a entender este proceso. Mediante este código, cada vezque un evento es 
disparado, un mensaje es agregado a la cajadatos eon el valor del evento y el de la propiedad status. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos') ; 


cache=window.applicationCache; 

cache.addEventListener(' checking' , function(){ mostrar(l); }, 

false); 

cache.addEventListener(' downloading' , function(){ mostrar(2); }, 

false); 

cache.addEventListener(' cached' , function(){ mostrar(3); }, 

false); 

cache.addEventListener( 'updateready ', function (){ mostrar(4); }, 

false); 

cache.addEventListener(' obsolete ', function(){ mostrar(5); }, 

false); 


function mostrar(valor){ 

caj adatos.innerHTML+='<br>Estado: ' tcache.status; 

cajadatos.innerHTML+=' | Evento: '+valor; 

} 

window.addEventListener('load', iniciar, false); 


Listado 16-8. Controlando la conexión. 

Usamos funciones anónimas para responder a los eventos y enviar un valor que nos permita identificarlos 
luego en la función mostrar (). Este valor y el valor de la propiedad status son mostrados en la pantalla cada 
vezque el navegador realiza un nuevo paso en la generación del cache. 

Hagalo usted mismo: Use los archivos HTML y CSS de ejemplos previos. Copie el código del Listado 16-8 
dentro del archivo cache. js. Suba la aplicación a su servidoryvea como los diferentes pasos del proceso 
son mostrados en la pantalla de aeuerdo al estado del cache cada vezque el documento es cargado. 





IMPORTANTE: Si el cache ya fue creado, es importante seguir diferentes pasos para limpiarel viejo cache y 
cargar la nueva versión. Modificar el archivo manifiesto agregando un comentario es uno de los pasos 
necesarios, pero no el unico. Los navegadores mantienen una copia de los archivos en el ordenador por 
algunas horas antes de siquiera considerar comprobar si existen actualizaciones, por lo que no importa 
cuantos comentarios o archivos agregue al manifiesto, el navegador utilizara el viejo cache por un tiempo. 
Para probar estos ejemplos, le recomendamos cambiar los nombres de cada archivo. Por ejemplo, agregar 
un numero al finał del nombre (como en cache2. js) hara que el navegador considere esta como una nueva 
aplicación ycree un nuevo cache. Esto, por supuesto, es solo util por propósitos didacticos. 


Progreso 


Aplicaciones que incluyen imagenes, varios archivos de códigos, información para bases de datos, videos, o 
cualquier otro archivo de tamańo considerable pueden tomar un buen tiempo en ser descargadas. Para seguir 
este proceso, la API trabaja eon el ya conocido evento progress. Este evento es el mismo que ya hemos 
estudiado en capitulos anteriores. 

El evento progress solo es disparado mientras los archivos son descargados. En el siguiente ejemplo 
vamos a usar los eventos noupdate junto eon cached yupdateready analizados previamente para informar 
cuando el proceso es finalizado. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos') ; 

cajadatos.innerHTML='<progress value="0" max="100">0%</progress>'; 
cache=window.applicationCache; 

cache.addEventListener('progress', progreso, false); 

cache.addEventListener('cached', mostrar, false); 
cache.addEventListener('updateready', mostrar, false); 
cache.addEventListener('noupdate', mostrar, false); 

} 

function progreso (e){ 
if(e.lengthComputable){ 

var por=parseInt(e.loaded/e.total*100); 
var barraprogreso=cajadatos.ąuerySelector("progress"); 
barraprogreso.value=por; 
barraprogreso.innerHTML=por+'%'; 


function mostrar(){ 

caj adatos.innerHTML='Terminado'; 

} 

window.addEventListener('load', iniciar, false); 


Listado 16-9. Progreso de la descarga. 

Como siempre, el evento progress es disparado periódicamente para informar acerca del estado del 
proceso. En el código del Listado 16-9, cada vez que progress es disparado, la función progreso () es llamada 
y la situación es informada en pantalla usando un elemento <progress>. 

Existen diferentes situaciones posibles al finał del proceso. La aplicación podrla haber sido almacenada en el 
cache por primera vez, en este caso el evento cached es disparado. Tambien podrla ser que el cache ya existe y 
una actualización se eneuentra disponible, entonces cuando los archivos son finalmente descargados el evento 
que es disparado es updateready. Y una tercera posibilidad es que un cache ya estaba en uso y no se encontró 
ninguna actualización, en este caso el evento noupdate es el que sera disparado. Escuchamos a cada uno de 
estos eventos y llamamos a la función mostrar () en cada caso para imprimir el mensaje “Terminado” en la 
pantalla, indicando de este modo la finalización del proceso. 

Puede encontrar una explicación de la función progreso () en el Capitulo 13. 

Hagalo usted mismo: Use los archivos HTML y CSS de ejemplos previos. Copie el código del Listado 16-8 
dentro del archivo cache. js. Suba la aplicación a su servidor y cargue el documento principal. Debera 
incluir un archivo de gran tamańo en el manifiesto para poder ver trabajando la barra de progreso (algunos 
navegadores establecen limitaciones sobre el tamańo del cache. Recomendamos probar este ejemplo eon 





archivos de no mas de 5 megabytes). Por ejemplo, usando el video trailer .ogg introducido en el Capitulo 
5, el archivo manifiesto serveria como el siguiente: 


CACHE MANIFEST 
cache.html 
cache.css 
cache.j s 
trailer.ogg 

# fecha 2011/06/27 


IMPORTANTE: En nuestro ejemplo utilizamos innerHTML para agregar un nuevo elemento <progress> al 
documento. Esta no es una practica recomendada pero es util y conveniente por razones didacticas. 
Normalmente los elementos son agregados al documento usando el metodo Javascript createElement () 
junto eon appendChild(). 


Actualizando el cache 


Hasta el momento hemos visto como crear un cache para nuestra aplicación, como informar al navegador cuando 
una actualización esta disponible y como controlar el proceso cada vez que un usuario accede a la aplicación. 
Esto es util pero no completamente transparente para el usuario. El cache y las actualizaciones del mismo son 
cargados tan pronto como el usuario ejecuta la aplicación, lo que puede producir demoras ymal funcionamiento. 
La API resuelve este problema incorporando nuevos metodos que nos permiten actualizar el cache mientras la 
aplicación esta siendo utilizada: 

update() Este metodo inicia una actualización del cache. Le indica al navegador que descargue primero el 
archivo manifiesto y luego continue eon el resto de los archivos si detecta algun cambio (los archivos 
para el cache fueron modificados). 

swapCache() Este metodo activa el cache mas reciente luego de una actualización. No ejecuta ningun 
código ytampoco reemplaza recursos, solo le indica al navegador que un nuevo cache se eneuentra 
disponible para su lectura. 

Para actualizar el cache, lo unico que necesitamos hacer es llamar al metodo update (). Los eventos 
updateready ynoupdate seran utiles para conocer el resultado del proceso. En el próximo ejemplo, vamos a 
usar un nuevo documento HTML eon dos botones para solicitar la actualización y comprobar cual es el código que 
se eneuentra actualmente en el cache. 


<!DOCTYPE html> 

chtml lang="es" manifest="micache,manifest"> 

<head> 

<title>Offlinę API</title> 

<link rel="stylesheet" href="cache.css"> 

<script src="cache. j s"X/script> 

</head> 

<body> 

<section id="cajadatos"> 

Aplicación para trabajar sin conexión 
</section> 

<button id="actualizar">Actualizar Cache</button> 
<button id="prueba">Verificar</button> 

</body> 

</html> 


Listado 16-10. Documento HTML para probarel metodo upo*t„o. 

El código Javascript implementa tecnicas ya estudiadas. Solo hemos agregado dos nuevas funciones para 
respondera los botones de la plantilla: 


function iniciar(){ 






cajadatos=document.getElementByld('caj adatos ') ; 

var actualizar=document.getElementByld('actualizar'); 

actualizar.addEventListener('click', actualizarcache, false); 

var prueba=document.getElementByld('prueba'); 

prueba.addEventListener('click', probarcache, false); 

cache=window.applicationCache; 

cache.addEventListener('updateready', function(){ mostrar(l); }, 

false); 

cache.addEventListener('noupdate', function(){ mostrar(2); }, 

false); 


function actualizarcache(){ 
cache.update(); 

} 

function probarcache (){ 

cajadatos.innerHTML+='<br>cambiar este mensaje'; 

} 

function mostrar(valor){ 
switch(valor){ 
case 1: 

caj adatos.innerHTML+='<br>Actualización Lista'; 
break; 
case 2: 

cajadatos.innerHTML+='<br>Actualización No Disponible'; 
break; 


window.addEventListener('load', iniciar, false); 


Listado 16-11. Actualizando el cache y comprobando la versión actual. 

En la función iniciar (), se agregó una escucha para el evento click a los dos botones de la plantilla. Un 
clic en el botón actualizar llamara a la función actualizarcache () y ejecutara el metodo update () . Y un clic 
sobre el botón prueba llamara a la función probarcache ( ) yun texto sera mostrado en la cajadatos. Este texto 
nos facilitara la creación de una nueva versión del código eon la que podremos comprobar si el cache es 
actualizado o no. 

Hagalo usted mismo: Cree un nuevo documento HTML eon el código del Listado 16-10. El manifiesto y el 
archivo CSS son los mismos de ejemplos previos (a menos que usted haya cambiado algunos nombre de 
archivos. En este caso debera actualizar la lista de archivos dentro del manifiesto). Copie el código del 
Listado 16-11 dentro de un archivo llamado cache. js, y suba todo a su servidor. Abra el documento 
Principal en su navegadoryuse los botones para probarla aplicación. 

Una vez que el documento HTML es cargado, la ventana muestra nuestra tipica cajadatos y dos botones 
debajo. Como explicamos anteriormente, el botón “Actualizar Cache” tiene el evento click asociado eon la 
función actualizarcache (). Si el botón es presionado, el metodo update () es ejecutado dentro de esta 
función yel proceso de actualización comienza. El navegador descarga el archivo manifiesto ylo compara eon el 
mismo archivo que ya se eneuentra en el cache. Si detecta que este archivo fue modificado, todos los archivos 
listados en su interior son descargados nuevamente. Cuando el proceso finaliza, el evento updateready es 
disparado. Este evento llama a la función mostrar () eon el valorl, correspondiente al mensaje “Actualización 
Lista”. Por otro lado, si el archivo manifiesto no cambió, ninguna actualización es detectada yel evento noupdate 
es disparado. Este evento tambien llama a la función mostrar () pero eon el valor2, correspondiente al mensaje 
“Actualización No Disponible”. 

Puede comprobar como trabaja este código modificando o agregando comentarios al archivo manifiesto. 
Cada vez que presione el botón para actualizar el cache luego de una modificación, el mensaje “Actualización 
Lista” aparecera en la cajadatos. Puede tambien hacer pruebas cambiando el texto en la función 
probarcache ( ) para detectar cuando una actualización esta siendo utilizada como el cache actual. 

IMPORTANTE: Esta vez no hay necesidad de eliminar el cache desde el panel de control del navegador para 
descargar una nueva versión. El metodo update () fuerza al navegador a descargar el archivo manifiesto y 
el resto de los archivos si una actualización es detectada. Sin embargo, el nuevo cache no estara disponible 
hasta que el usuario reinicie la aplicación. 




16.3 Referenda rapida 


API Offline es un grupo de tecnicas que involucran un archivo especial llamado manifiesto y varios metodos, 
eventos y propiedades para crear un cache y poder ejecutar aplicaciones desde el ordenador del usuario. La API 
fue pensada para proveer acceso permanente a las aplicaciones y la posibilidad de trabajar mientras sin acceso 
a Internet. 


Archivo manifiesto 


El archivo manifiesto es un archivo de texto eon la extensión .manifest conteniendo una lista de los archivos 
necesarios para construir el cache de la aplicación. Debe ser comenzado eon la linea cache manifest y su 
contenido puede estar organizado bajo las siguientes categorias: 

CACHE Esta categoria incluye los archivos que deben ser descargados para formar parte del cache. 

NETWORK Esta categoria incluye los archivos que solo pueden seraccedidos cuando se esta conectado. 

FALLBACK Esta categoria permite definir archivos en el cache que seran usados en lugar de archivos en el 
servidor cuando estos no esten disponibles. 


Propiedades 


El objęto Navigator incluye una nueva propiedad para informarel estado de la conexión: 

onLine Esta propiedad retorna un valor booleano que indica la condición de la conexión. Es false (falso) si 
el navegador esta desconectado y true (verdadero) en caso contrario. 

La API provee la propiedad status para informar sobre el estado del cache de la aplicación. Esta propiedad 
es parte del objęto ApplicationCache y puede tomar los siguientes valores: 

UNCACHED (valor 0) Este valor indica que ningun cache fue creado aun para la aplicación. 

IDLE(valor 1) Este valorindica que el cache de la aplicación es el mas nuevo yno es obsoleto. 

CHECKING (valor 2) Este valor indica que el navegador esta buscando nuevas actualiza-ciones. 

DOWNLOADING (valor 3) Este valor indica que los archivos para el cache estan siendo descargados. 

UPDATEREADY (valor 4) Este valor indica que el cache para la aplicación esta disponible y no es obsoleto, 
pero no es el mas nuevo; una actualización esta lista para reemplazarlo. 

OBSOLETE (valor 5) Este valor indica que el cache actual es obsoleto. 

Eventos 


Existen dos eventos para controlarel estado de la conexión: 

Online Este evento es disparado cuando el valorde la propiedad onLine cambia a true (verdadero). 

offline Este evento es disparado cuando el valor de la propiedad onLine cambia a false (falso). 

La API ofrece varios eventos, pertenecientes al objęto ApplicationCache, que informan acerca de la condición 
del cache: 

checking Este evento es disparado cuando el navegador esta comprobando si existen nuevas 
actualizaciones. 

noupdate Este evento es disparado cuando no se eneuentran nuevas actualizaciones. 

downloading Este evento es disparado cuando el navegador ha encontrado una nueva actualización y 
comienza a descargar los archivos. 

cached Este evento es disparado cuando el cache esta listo para ser usado. 

updateready Este evento es disparado cuando la descarga de una nueva actualización ha finalizado. 
obsolete Este evento es disparado cuando el archivo manifiesto no se eneuentra disponible yel cache esta 



siendo eliminado. 


progress Este evento es disparado periódicamente durante el proceso de descarga de los archivos para el 
cache. 

error Este evento es disparado si ocurre un error durante la creación o la actualización del cache. 


Metodos 


Dos metodos son incluidos en la API para solicitar una actualización del cache: 

update() Este metodo inicia una actualización del cache. Indica al navegador que descargue el archivo 
manifiesto yel resto de los archivos si una actualización es detectada. 

swapCachef) Este metodo activa el cache mas reciente luego de una actualización. No ejecuta los nuevos 
códigos y tampoco reemplaza recursos, solo indica al navegador que un nuevo cache esta disponible 
para su uso. 




Conclusiones 


Trabajando para el mundo 


Este es un libro sobre HTML5. Fue pensado como una gula para desarrolladores, diseńadores y programadores 
que quieran construir sitios web y aplicaciones utilizando las tecnologlas mas actuales. Pero nos encontramos en 
un proceso de transición en el cual las viejas tecnologlas se fusionan eon las nuevas, y los mercados no pueden 
seguirles el paso. Al mismo tiempo que millones y millones de copias de nuevos navegadores son descargadas 
de la web, millones y millones de personas no son ni siquiera conscientes de su existencia. El mercado esta aun 
repleto de viejos ordenadores funcionando eon Windows 98 e Internet Explorer 6, o incluso peor. 

Crearpara la web fue siempre un desaflo, yse vuelve cada vezmas complicado. Apesar de los prolongados y 
duros esfuerzos por construir e implementar estandares para Internet, ni siquiera los nuevos navegadores los 
soportan por completo. Y viejas versiones de navegadores que no siguen ninguna clase de estandar siguen 
presente, funcionando alrededor de todo el mundo, haciendo nuestras vidas imposible. 

Por esta razón, es momento de ver que podemos hacer para acercar HTML5 a la gente, como podemos crear 
e innovar en un mundo que parece indiferente. Llegó la hora de estudiar que alternativas tenemos para trabajar 
eon estas nuevas tecnologlas y hacerlas disponibles para todos. 


Las alternativas 


Cuando se trata de alternativas, debemos decidir que posición tomar. Podemos ser agresivos, atentos, 
inteligentes o trabajadores. Un desarrollador agresivo dira: “Esta aplicación fue programada para trabajar en 
nuevos navegadores. Los nuevos navegadores son gratuitos. No sea perezoso y descargue una copia”. El 
desarrollador atento dira: “Esta aplicación fue desarrollada aprovechando las nuevas tecnologlas disponibles. Si 
desea disfrutar mi trabajo en todo su potencial, actualice su navegador. Mientras tanto, aqul tiene una versión 
antigua que puede utilizar en su lugar”. El desarrollador inteligente dira: “Hacemos la tecnologla de ultima 
generación disponible para todos. No necesita hacer nada, nosotros ya lo hicimos por usted”. Y finalmente, un 
trabajador dira: “Esta es una versión de nuestra aplicación adaptada a su navegador, aqul puede acceder a otrą 
eon mas herramientas, especial para nuevos navegadores, y aqul ofrecemos la versión experimental de nuestra 
super evolucionada aplicación”. 

Para un acercamiento mas practico yutil, estas son las opciones disponibles cuando el navegadordel usuario 
no esta preparado para HTML5: 

Informar Recomiende al usuario actualizar su navegador si algunas caracterlsticas requeridas por su 
aplicación no estan disponibles. 

Adaptar Seleccione diferentes estilos y códigos para el documento de aeuerdo eon las caracterlsticas 
disponibles en el navegadordel usuario. 

Redireccionar Redireccione usuarios a un documento completamente diferente disenado especialmente 
para viejos navegadores. 

Emular Use librerlas que hagan HTML5 disponible en viejos navegadores. 


Modern izr 


Sin importar cual es la opción elegida, lo primero que debemos hacer es detectar si las caracterlsticas de HTML5 
requeridas por su aplicación estan disponibles en el navegador del usuario o no. Estas caracterlsticas son 
independientes y faciles de identificar, pero las tecnicas requeridas para hacerlo son tan diversas como las 
caracterlsticas mismas. Desarrolladores deben considerar diferentes navegadores y versiones, y depender de 
códigos que a menudo no son para nada confiables. 

Una pequena librerla llamada Modernizr fue desarrollada eon la intención de resolver este problema. Esta 
librerla crea un objęto llamado Modernizr que ofrece propiedades para cada caracterlstica de HTML5. Estas 
propiedades retornan un valor booleano que sera true (verdadero) o false (falso) dependiendo si la 
caracterlstica esta disponible o no. 

La librerla es de código abierto, programada en Javascript y disponible gratuitamente en www.modernizr.com . 
Solo tiene que descargar el archivo Javascript e incluirlo en sus documentos, como en el siguiente ejemplo: 



<IDOCTYPE html> 

<html lang="es"> 

<head> 

<title>Modernizr</title> 

<script src="modernizr .min . j s"x/script> 
<script src="modernizr. j s"x/script> 
</head> 

<body> 

<section id="cajadatos"> 
contenido 
</section> 

</body> 

</html> 


Listado C-1. Incluyendo Modernizr en sus documentos. 

El archivo llamado modernizr .min. js es una copia del archivo de la Ubrana Modernizr descargado desde su 
sitio web. El segundo archivo incluido en el documento HTML en el Listado C-1 es nuestro propio código 
Javascript donde controlamos los valores de las propiedades provistas por la libreria: 


function iniciar(){ 

var caj adatos=document.getElementByld('caj adatos') ; 
if(Modernizr,boxshadow){ 

cajadatos.innerHTML='Box Shadow esta disponible'; 
}else{ 

cajadatos.innerHTML='Box Shadow no esta disponible'; 


} 

window.addEventListener('load', iniciar, false); 


Listado C-2. Detectando la disponibilidad de estilos CSS para generar sombras. 

Como puede ver en el código del Listado C-2, podemos detectar cualquier caracteristica de HTML5 usando 
solo un condicional if y la propiedad del objęto Modernizr correspondiente. Cada caracteristica tiene su propia 
propiedad disponible. 

IMPORTANTĘ: Esta es solo una introducción breve a esta util libreria. Usando Modernizr, por ejemplo, 
podemos tambien seleccionar un grupo de estilos CSS desde archivos CSS sin usar Javascript. Modernizr 
ofrece clases especiales para implementar en nuestro archivo de estilos y asi seleccionar las propiedades 
CSS apropiadas de acuerdo a cuales estan disponibles en el navegador que abrió la aplicación. Para 
aprender mas sobre esta libreria, visite www.modernizr.com. 


Librerias 


Una vezque las caracteristicas disponibles son detectadas, tenemos la opción de usar solo aquello que funciona 
en el navegador del usuario o recomendarle actualizar el software a una versión que incluya todas las 
caracteristicas que nuestra aplicación necesita. Sin embargo, imagine que usted es un desarrollador obstinado o 
un loco programador que (al igual que sus usuarios yclientes) no se interesa por fabricantes de navegadores o 
versiones de programas o versiones beta o caracteristicas no implementadas o lo que sea, usted solo quiere 
ofrecer la ultima tecnologia disponible sin importar nada. 

Bueno, aqui es donde librerias independientes pueden ayudar. Docenas de programadores en el mundo, 
probablemente mas obstinados que nosotros, se encuentran desarrollando y mejorando librerias que imitan 
caracteristicas de HTML5 en navegadores viejos, especialmente APls de Javascript. Gracias a este esfuerzo, ya 
disponemos de los nuevos elementos HTML, selectores y estilos CSS3, y hasta complejas APls como Canvas o 
Web Storage en cada navegadordel mercado. 

Por mayor información dirijase al siguiente enlace donde encontrara una lista actua-lizada de todas las 
librerias disponibles: www.github.com/Modernizr/Modernizr/wiki/ 

HTML 5-Cross-b ro wser-Polyfills 








Google Chrome Frame 


Google Chrome Frame sera probablemente nuestro ultimo recurso. Personalmente pienso que era una buena 
idea al comienzo, pero hoydia es mejor recomendar a nuestros usuarios actualizar sus navegadores antes que 
descargar un agregado como Google Chrome Frame. 

Google Chrome Frame fue especlficamente desarrollado para las viejas versiones de Internet Explorer. Fue 
disenado para introducir todo el poderylas posibilidades del navegador Google Chrome dentro de navegadores 
que no estan preparados para las nuevas tecnologias pero aun se encuentran instalados en los ordenadores de 
los usuarios yforman parte del mercado. 

Como dije anteriormente, fue una buena idea. Insertando una simple etiqueta FITML en nuestros documentos, 
un mensaje era mostrado a los usuarios recomendando instalar Google Chrome Frame antes de ejecutar la 
aplicación. Luego de finalizado este simple paso, todas las caracteristicas soportadas por Google Chrome 
estaban automaticamente disponibles en ese viejo navegador. Sin embargo, los usuarios no evitaban descargar 
software de la web. No discernir cual es la diferencia entre esto y descargar una nueva versión de un navegador, 
especialmente ahora que hasta Internet Explorer tiene su propia versión gratuita compatible eon FITML5. Estos 
dias, eon tantos navegadores listos para ejecutar aplicaciones FITML5, es mejorguiara los usuarios hacia este 
nuevo software en lugarde enviarlos hacia oscuros yconfusos agregados como Google Chrome Frame. 

Para conocer mas sobre Google Chrome Frame y como usarlo vi s i te: 

code.google.com/chrome/chromeframe/ 



Trabajando para la nube 


En este nuevo mundo de dispositivos móviles y computación en la nube, no importa que tan nuevo sea el 
navegador, siempre habra algo mas de que preocuparnos. Probablemente el iPhone puede ser considerado el 
responsable de comenzarlo todo. Desde su aparición, varias cosas cambiaron en la web. El iPad lo siguió, ytoda 
clase de imitaciones emergieron luego para satisfacer este nuevo mercado. Gracias a este cambio radical, el 
acceso móvil a Internet se volvió una practica comun. De repente estos nuevos dispositivos se volvieron un 
importante objetivo para sitios y aplicaciones web, y la diversidad de plataformas, pantallas e interfaces forzaron a 
los desarrolladores a adaptarsus productos a cada caso especifico. 

Estos dlas, independientemente de la clase de tecnologla que usemos, nuestros sitios y aplicaciones web 
deben ser adaptados a cada posible plataforma. Esta es la unica manera de mantener consistencia y hacer 
nuestro trabajo disponible para todos. Afortunadamente, HTML considera estas situaciones y ofrece el atributo 
media en el elemento <link> para seleccionar recursos externos de acuerdo a parametros predeterminados: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Documento Principal</title> 

<link rel="stylesheet" href="ordenador.css" media="all and (min- 

width: 769px)"> 

<link rel="stylesheet" href="tablet.css" media="all and (min- 

width: 321px) and (max-width: 768px)"> 
<link rel="stylesheet" href="celular.css" media="all and (min- 

width: Opx) and (max-width: 320px)"> 

</head> 

<body> 

</body> 

</html> 


Listado C-3: Diferentes archivos CSS para diferentes dispositivos. 

Seleccionar cuales estilos CSS seran aplicados al documento es una manera facil de hacer este trabajo. De 
acuerdo al dispositivo o al tamańo de la pantalla, los archivos CSS son cargados y los estilos apropiados son 
aplicados. Elementos HTML pueden ser cambiados de tamańo y documentos enteros pueden ser adaptados y 
mostrados dentro de espacios ycircunstancias especificas. 

En el Listado C-3, tres archivos CSS diferentes son incorporados para tres situaciones distintas. Las 
situaciones son detectadas por los valores del atributo media en cada etiqueta <link>. Usando las propiedades 
min-width ymax-width, podemos determinarel archivo CSS que sera aplicado a este documento de acuerdo 
eon la resolución de la pantalla en la cual el documento esta siendo mostrado. Si el tamańo horizontal de la 
pantalla es de un valorentre 0 y320 pixeles, el archivo celular.css es cargado. Para una resolución entre 321 y 
768 pixeles, el archivo tablet.css es el incluido. Y finalmente, para una resolución mayor a 768 pixeles, el 
archivo ordenador.css es el que sera usado. 

En este ejemplo, contemplamos tres posibles escenarios: el documento es cargado en un celular pequeńo, 
una Tablet PC o un ordenador de escritorio. Los valores usados son los que normalmente se eneuentran en 
estos dispositivos. 

Por supuesto, el proceso de adaptación no incluye solo estilos CSS. Las interfaces provistas por estos 
dispositivos son ligeramente diferentes entre si debido principalmente a la eliminación de partes fisicas, como el 
teclado y el ratón. Eventos comunes como click omouseover han sido modificados o en algunos casos 
reemplazados por eventos tactiles. Y ademas, existe otrą importante caracteristica presente en dispositivos 
móviles que le permite al usuario cambiar la orientación de la pantalla y de este modo cambiar tambien el 
espacio disponible para el documento. Todos estos cambios entre un dispositivo y otro hacen imposible lograr 
una buena adaptación eon solo agregar o modificar algunas reglas CSS. Javascript debe ser usado para adaptar 
los códigos o incluso detectar la situación y redireccionar a los usuarios hacia una versión del documento 
especifica para el dispositivo eon el que estan accediendo a la aplicación. 

IMPORTANTE: Este tema se eneuentra fuera de los propósitos de este libro. Para mayor información, vi s i te 
nuestro sitio web. 



Recomendaciones finales 


Siempre habra desarrolladores que le diran: “Si usa tecnologias que no se encuentran disponibles para el 5% de 
los navegadores en el mercado, perdera un 5% de usuarios”. Mi respuesta es: “Si usted tiene clientes que 
satisfacer, entonces adapte, redireccione o emule, pero si usted trabaja para usted mismo, informe”. 

Siempre debe buscar el camino al exito. Si trabaja para otros, debe ofrecer soluciones completamente 
funcionales, productos que los clientes de sus clientes puedan acceder, sin importar la elección que hayan hecho 
eon respecto a ordenadores, navegadores o sistemas operativos. Pero si usted trabaja para usted mismo, para 
ser exitoso debe crear lo mejor de lo mejor, debe innovar, estar por delante de los demas, independientemente de 
lo que el 5% de los usuarios tenga instalado en sus ordenadores. Debe trabajar para el 20% que ya descargó la 
ultima versión de Firefox, el 15% que ya tiene Google Chrome instalado en su ordenador, el 10% que tiene Safari 
en su dispositivo móvil. Usted tiene millones de usuarios listos para convertirse en sus clientes. Mientras que el 
desarrollador le pregunta por que se arriesgaria a perder un 5% de usuarios, yo le pregunto: <^por que dar la 
espalda a las oportunidades que se le presentan? 

Usted nunca conquistara el 100% del mercado, y eso es un hecho. Usted no desarrolla sus sitios web en 
chino o portugues. Usted no esta trabajando para el 100% del mercado, usted ya trabaja solo para una pequena 
porción del mismo. ,j,Por que seguir limitandose? Desarrolle para el mercado que lo acerque al exito. Desarrolle 
para la porción del mercado que crece continuamente y que le permitira aplicar las nuevas tecnologias 
disponibles y dejar correr su imaginación. Del mismo modo que no se preocupa por mercados que hablan otros 
idiomas, tampoco debe preocuparse por la parte del mercado que aun utiliza viejas tecnologias. Informe. 
Muestreles lo que se estan perdiendo. Aproveche las ultimas tecnologias disponibles, desarrolle para el futuro y 
tendra el exito asegurado. 




Extras 


Los códigos fuente para este libro se encuentran disponibles en www.minkbooks.com. 



